Nuxt middleware中使用redirect导致state变为null的问题求助

1. 你的auth中间件存在逻辑错误：!user分支下的else { redirect() }属于空重定向调用，会触发无限路由重定向，每一次重定向都会重置当前页面的运行上下文，导致vuex状态丢失。
2. 你当前项目配置target: 'static'属于纯静态站点，nuxtServerInit仅会在静态生成/首次访问服务端渲染阶段执行一次，客户端侧触发的redirect跳转属于前端路由跳转，不会重新触发nuxtServerInit执行初始化用户状态的逻辑，你没有额外做客户端侧的用户状态持久化恢复，跳转后就会出现state为null的问题。
3. 你当前仅将access_token存入cookie，没有存储用户的角色、身份等核心信息，客户端侧无法直接从cookie读取用户信息初始化state。

第一步：修复auth中间件逻辑 #

删除!user分支下的无效空redirect调用，优化路由匹配写法，避免不必要的重定向：

export default function ({ store, route, redirect }) {
  const user = store.getters['user/user']
  const blockRouteAdmin = /^\/admin(\/.*)?$/
  const blockRouteManager = /^\/manager(\/.*)?$/
  const authPath = ['/signup', '/login']
  const isAuthPath = authPath.includes(route.path)

  if (user) {
    if (user.isAdmin && !blockRouteAdmin.test(route.path)) {
      return redirect('/admin')
    }
    if (user.isManager && !blockRouteManager.test(route.path)) {
      return redirect('/manager')
    }
    if (user.isUser) {
      if (blockRouteAdmin.test(route.path) || blockRouteManager.test(route.path) || isAuthPath) {
        return redirect('/')
      }
    }
  } else {
    if (blockRouteAdmin.test(route.path) || blockRouteManager.test(route.path)) {
      return redirect('/login')
    }
  }
}

第二步：添加客户端用户状态初始化逻辑 #

新建plugins/init.client.js，仅在客户端运行，页面加载时从cookie读取/请求用户信息初始化state：

import { getUserFromCookie } from '~/helper'
export default async ({ store }) => {
  // 仅在state中无用户信息时执行初始化
  if (!store.getters['user/user']) {
    const user = getUserFromCookie() // 这里要修改你的getUserFromCookie方法，支持客户端无req时从document.cookie读取
    if (user) {
      await store.dispatch('user/setUSER', {
        email: user.email,
        isAdmin: user.admin,
        isManager: user.manager,
        isUser: user.user,
        uid: user.user_id,
        name: user.name,
      })
    }
  }
}

将插件注册到nuxt.config.js的plugins数组中：

plugins: ['~/plugins/firebaseConfig.js', '~/plugins/init.client.js'],

第三步：完善cookie存储逻辑 #

登录时除了access_token，也将用户的基础信息（加密后）存入cookie，方便客户端读取：

// store/user.js的userlogin方法补充
Cookies.set('user_info', JSON.stringify(userInfo)) // 生产环境建议加密后存储

修改getUserFromCookie方法，支持客户端无req参数时直接读取document.cookie中的用户信息。

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