Vue.js 3中Store切换标签页后不保存状态的问题排查

你的Store状态仅保存在内存中，当页面刷新（包括切换标签页后页面重新加载）时，内存中的状态会被重置为初始值（authenticated和activated变回false），所以返回时会触发重定向到登录页。你虽然把token存在了localStorage，但没有在应用启动时从localStorage恢复Store的认证状态。

方案一：手动同步状态到localStorage并初始化恢复 #

1. 修改Store定义（以Pinia为例） #

import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    authenticated: false,
    activated: false,
    token: ''
  }),
  actions: {
    // 设置认证状态并同步到localStorage
    setAuthState(authenticated, activated, token) {
      this.authenticated = authenticated
      this.activated = activated
      this.token = token
      
      localStorage.setItem('authState', JSON.stringify({
        authenticated,
        activated,
        token
      }))
    },
    // 应用启动时从localStorage恢复状态
    initAuthState() {
      const savedState = localStorage.getItem('authState')
      if (savedState) {
        const { authenticated, activated, token } = JSON.parse(savedState)
        this.authenticated = authenticated
        this.activated = activated
        this.token = token
      }
    }
  }
})

2. 更新login.vue中的登录逻辑 #

const store = useAuthStore();

const login = () => {
    api.login(email.value, password.value).then((res) => {
        if (res.success) {
            // 使用Store的action设置状态
            store.setAuthState(true, res.activated, res.token)
            console.log("I am active : " + store.activated) 
            console.log("I am authenticated : " + store.authenticated)
            router.push({name: "courses"})
        }
    }).catch((err) => {
        alert("Invalid credentials")
    })
}

3. 在应用入口初始化状态 #

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { useAuthStore } from './stores/auth'
import App from './App.vue'
import router from './router'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

// 初始化认证状态
const authStore = useAuthStore()
authStore.initAuthState()

app.use(router).mount('#app')

方案二：使用Pinia持久化插件（更简洁） #

1. 安装插件 #

npm install pinia-plugin-persistedstate

2. 配置Pinia使用插件 #

// main.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

3. 修改Store定义开启持久化 #

import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    authenticated: false,
    activated: false,
    token: ''
  }),
  // 开启持久化，默认存储到localStorage
  persist: true,
  actions: {
    setAuthState(authenticated, activated, token) {
      this.authenticated = authenticated
      this.activated = activated
      this.token = token
    }
  }
})

之后登录时直接调用setAuthState，状态会自动持久化，页面刷新后自动恢复。

• localStorage存储存在XSS攻击风险，若需更高安全性，可考虑用sessionStorage（标签页关闭后丢失），或配合后端使用HttpOnly Cookie存储token。
• 若使用Vuex而非Pinia，逻辑类似：在mutation中同步状态到localStorage，在Vuex初始化时从localStorage读取恢复。

内容的提问来源于stack exchange，提问作者Mike3355