前后端分离后，登录状态怎么保持？

Tr° 玉轩提问于 2026-02-23 19:56:20 阅读 73

框架

我用 Vue 做前端，后端是 Node.js + Express，已经实现登录接口。但每次刷新页面，用户就变成未登录状态了，明明后端返回了 token 啊。

我把 token 存在 localStorage 里了，请求时也加了 Authorization 头：Authorization: Bearer xxx，但刷新后组件里读不到用户信息，是不是哪里漏了？

前后端分离构架模式

我来解答赞 7 收藏

反馈

1 条解答

公孙青燕 Lv1

你这个问题很常见，前后端分离后登录状态保持的关键点有两个：一个是 token 的存储和传递，另一个是刷新页面后如何恢复用户信息。

你已经把 token 存到 localStorage 里了，请求时也加上了 Authorization 头，这部分没问题。但问题出在：刷新页面时，虽然 token 还在，但前端组件里读不到用户信息，说明你没在页面加载时主动去拿用户信息。

推荐的做法是：在应用初始化（比如 Vue 的 created 或 beforeMount 钩子）时，检查 localStorage 里有没有 token，如果有，就调用一个获取当前用户信息的接口（比如 /api/user/me），把这个用户信息存进 Vuex 或 pinia 里。这个接口最好也要带上 token 请求，确保服务端能验证身份。

后端也要配合：确保 /api/user/me 接口能根据 token 正确返回当前用户数据，并且这个接口要允许跨域（如果前后端端口不同的话）。

另外注意一点，localStorage 里的 token 是明文存的，别放敏感信息。如果项目对安全要求高，推荐用 httpOnly 的 cookie 存 token，这样前端脚本拿不到，能防 XSS。

举个前端的简化逻辑示例：

// 在 App.vue 或 main.js 里

import { createApp } from 'vue'

import store from './store'



const app = createApp(App)



// 应用初始化时检查 token 并恢复用户

if (localStorage.getItem('token')) {

  store.dispatch('fetchCurrentUser')

}



app.mount('#app')

store 里的 fetchCurrentUser 就是发个请求到后端拿用户信息，比如：

// store/actions.js

async fetchCurrentUser({ commit, state }) {

  const token = localStorage.getItem('token')

  if (!token) return



  const res = await fetch('/api/user/me', {

    headers: { 'Authorization': Bearer ${token} }

  })

  const user = await res.json()

  commit('SET_USER', user)

}

这样刷新页面，只要 token 还在，就能自动恢复登录态，组件里就能读到用户信息了。

最后提醒一句：别忘了在 axios 或 fetch 里统一加拦截器，自动从 localStorage 取 token 加到每个请求的 Authorization 头里，不然每个请求都手动写太容易漏了。

2026-02-23 20:05