安装vuex-persistedstate后Feathers-vuex auth认证状态仍不持久问题

问题根因 #

1. Feathers 认证客户端默认使用内存存储认证凭证，页面刷新后凭证直接丢失，你只持久化了 Vuex 状态，但没有同步配置 Feathers 客户端的持久化存储。
2. 页面刷新后没有先触发 Feathers 凭证校验的流程，就直接请求需要认证的仪表盘接口，导致未认证报错。
3. Vuex 插件注册顺序存在问题，导致认证状态恢复时机错误。

解决方案 #

1. 修正 Feathers 客户端认证配置

找到你的 feathers-client.js 文件，给 @feathersjs/authentication-client 配置 localStorage 作为持久化存储：

// feathers-client.js 示例配置
import feathers from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'
import auth from '@feathersjs/authentication-client'
import io from 'socket.io-client'

const socket = io('你的后端服务地址', {
  transports: ['websocket']
})

const feathersClient = feathers()
  .configure(socketio(socket))
  // 关键配置：替换默认内存存储为localStorage，刷新后凭证不会丢失
  .configure(auth({
    storage: window.localStorage
  }))

export default feathersClient

2. 新增全局路由守卫，刷新后先完成认证再进入页面

在你的路由配置文件（一般为 router/index.js）中添加前置守卫，进入需要认证的页面前先完成凭证校验：

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'

Vue.use(VueRouter)

const routes = [
  // 给需要登录才能访问的路由添加meta标识
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/Dashboard.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  }
]

const router = new VueRouter({ routes })

// 新增前置路由守卫
router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  try {
    // 无参数调用authenticate会自动读取本地存储的token完成认证
    await store.dispatch('auth/authenticate')
    // 已登录用户访问登录页直接跳转到仪表盘
    if (to.name === 'Login') return next({ name: 'Dashboard' })
    next()
  } catch (e) {
    // 认证失败时，需要登录的页面跳转到登录页
    if (requiresAuth) return next({ name: 'Login' })
    next()
  }
})

export default router

3. 调整 Vuex 插件注册顺序

createPersistedState 要放在 auth 插件之后，保证 auth 模块先完成注册，再从 localStorage 恢复状态：

// store/index.js 修正plugins顺序
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  plugins: [...servicePlugins, auth, createPersistedState({storage: window.localStorage})]
})

4. 仪表盘请求优化

给仪表盘页面添加加载状态，等路由守卫的认证流程完成后再触发数据拉取，避免认证未完成时调用接口触发报错。

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