通过Nuxt中间件按用户角色跳转时出现无限重载问题如何解决

问题排查 #

1. 全局中间件未配置白名单：你在nuxt.config.js中将role中间件注册为全局中间件，所有路由包括/auth/login都会触发该中间件执行。当无token跳转到登录页后，登录页加载时会再次触发中间件，重复判断无token后再次跳转，形成无限重定向死循环。
2. 服务端渲染场景下window对象不存在：如果你的项目开启了SSR，中间件会先在服务端执行，此时不存在window对象，读取window.localStorage会抛出异常，也可能导致跳转逻辑异常。

修复方案 #

方案1：保留全局中间件，增加白名单判断与SSR兼容 #

修改middleware/role.js代码：

Nuxt2 写法

export default function ({ route, redirect, process }) {
  // 配置无需鉴权的白名单路由
  const whiteList = ['/auth/login']
  // 当前路由在白名单内直接放行，不执行后续鉴权逻辑
  if (whiteList.includes(route.path)) {
    return
  }
  // 仅在客户端环境下读取localStorage，避免服务端执行时报错
  if (process.client && !window.localStorage.getItem('auth.token')) {
    return redirect('/auth/login')
  }
}

Nuxt3 写法

export default defineNuxtRouteMiddleware((to, from) => {
  const whiteList = ['/auth/login']
  if (whiteList.includes(to.path)) {
    return
  }
  if (process.client && !window.localStorage.getItem('auth.token')) {
    return navigateTo('/auth/login')
  }
})

方案2：改用页面级中间件，避免全局触发 #

如果你不需要全站点鉴权，可以移除nuxt.config.js中的全局中间件配置：

// 删除该部分配置
router: {
  middleware: ['role']
},

仅在需要鉴权的页面单独声明使用该中间件即可，登录页无需声明，自然不会触发鉴权逻辑：

// 需要鉴权的页面内添加（Nuxt3写法，Nuxt2对应页面组件的middleware配置项）
definePageMeta({
  middleware: ['role']
})

优化建议 #

如果项目开启了SSR，更推荐将token存储在cookie中，可直接在服务端读取，无需依赖客户端环境，鉴权逻辑会更稳定。

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