如何用@nuxtjs/auth-module持久化Cookie会话？含重定向问题

2. 如何避免在mounted阶段恢复会话时出现多次重定向？ #

你遇到的页面闪烁问题，本质是页面加载时Nuxt Auth先根据初始状态判断未登录，触发了/login重定向，随后你的刷新逻辑成功恢复会话，又跳转回原页面。解决核心是在页面渲染前完成token刷新，确保loggedIn状态正确，或者手动控制重定向逻辑：

方案一：禁用Auth默认自动重定向，用自定义中间件控制

1. 先在nuxt.config.js中关闭默认的登录重定向：

auth: {
  redirect: {
    login: false, // 禁用默认的登录重定向
    home: '/'
  },
  // 其他配置...
}

2. 创建自定义中间件middleware/auth-check.js：

export default async function ({ $auth, redirect }) {
  // 先尝试检查并刷新会话
  const isLoggedIn = await $auth.strategies.jwtSessions.check()
  
  if (!isLoggedIn) {
    return redirect('/login')
  }
}

3. 在需要权限的页面或全局配置中使用这个中间件：

// nuxt.config.js
router: {
  middleware: ['auth-check']
}

这样就能在页面渲染前完成会话检查和刷新，避免初始状态错误导致的重定向闪烁。

方案二：调整策略初始化时机，确保刷新在状态判断前完成

修改策略的init方法，在初始化阶段就完成token刷新：

async init() {
  await super.init()
  if (process.client) {
    const csrfToken = this.$auth.$storage.getUniversal('csrf_token')
    if (csrfToken) {
      try {
        const refreshResult = await this.$auth.ctx.app.$axios.post('/refresh')
        if (refreshResult.data?.csrf) {
          this.$auth.$storage.setUniversal('csrf_token', refreshResult.data.csrf)
          await this.fetchUser()
        }
      } catch (e) {
        // 刷新失败，清除本地登录状态
        await this._logoutLocally()
      }
    }
  }
}

这样在Auth策略初始化时就完成了刷新，页面加载时loggedIn状态已经是正确的，不会触发错误的重定向。

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