Nuxt Auth静态模式下已登录用户重定向失效如何解决？

故障根因说明 #

Nuxt 2 执行nuxt generate时会默认预渲染所有可遍历的路由为静态HTML，你站点的/路由会被直接预渲染为注册页静态内容，客户端JS加载完成、Nuxt Auth模块完成登录态初始化之前，跳转逻辑不会触发。按钮无法点击通常是静态页hydration（客户端水合）失败导致，预渲染内容和客户端渲染内容不一致会阻塞整个页面的交互逻辑。

修复建议 #

• 给首页（pages/index.vue）添加Nuxt Auth的guest访问限制，已登录用户访问该页面会自动跳转到配置的home路由/dashboard，在页面导出配置中添加以下代码：

export default {
  middleware: 'auth',
  auth: 'guest',
  // 其他原有配置
}

• 在nuxt.config.js中调整预渲染配置，排除/路由的预渲染，避免生成固定的静态注册页：

export default {
  // 其他原有配置
  generate: {
    exclude: [/^\/$/],
    // 若你站点为纯SPA模式，可额外开启fallback，所有动态路由走SPA入口
    // fallback: true
  }
}

• 新增客户端初始化插件，强制页面加载时优先校验登录态执行跳转，避免Auth模块初始化延迟导致跳转失效：

1. 新建plugins/auth.redirect.client.js文件，写入以下代码：

export default function ({ app, route }) {
  if (process.client && route.path === '/' && app.$auth.loggedIn) {
    app.$router.replace('/dashboard')
  }
}

2. 在nuxt.config.js的plugins数组中注册该插件：

plugins: [
  { src: '~/plugins/auth.redirect.client.js', mode: 'client' },
  // 其他原有插件
]

• 修复页面交互失效问题：给首页的注册按钮、表单等交互内容外层包裹<client-only>标签，只在客户端渲染这部分内容，避免水合冲突：

<template>
  <div>
    <client-only>
      <!-- 原有注册表单、按钮等交互内容 -->
    </client-only>
  </div>
</template>

完成以上修改后重新执行nuxt generate打包验证即可。

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