Nuxt全局配置的role中间件如何在指定页面禁用

问题原因 #

你在nuxt.config.js中注册的是全局路由中间件，默认对所有路由生效，页面组件中自定义的role: false字段不会被中间件自动识别，因此无法触发禁用逻辑，所有页面依然会执行role中间件。
你之前遇到的无限重定向问题，本质也是因为跳转登录页后，全局中间件依然会在校验无token时再次触发跳转，形成死循环。

解决方法 #

调整role全局中间件的逻辑，主动读取当前待进入页面的配置项，判断是否需要跳过校验：

// 修改后的 middleware/role.js
export default function ({ route, app }) {
  // 读取当前路由匹配的页面组件配置
  const currentPage = route.matched[0]?.components?.default
  // 如果页面配置了role: false，直接跳过校验
  if (currentPage?.role === false) {
    return
  }
  // 原有校验逻辑
  if (!window.localStorage.getItem('auth.token')) {    
    app.router.push('/auth/login')
  }
}

如果你的项目用到了嵌套路由，可以调整判断逻辑，适配所有层级的组件配置：

// 嵌套路由适配版
export default function ({ route, app }) {
  // 遍历所有匹配到的路由组件，只要有一个配置了role: false就跳过校验
  const disableRoleMiddleware = route.matched.some(record => {
    return record.components?.default?.role === false
  })
  if (disableRoleMiddleware) {
    return
  }
  // 原有校验逻辑
  if (!window.localStorage.getItem('auth.token')) {    
    app.router.push('/auth/login')
  }
}

修改后你原来在login.vue、根页面配置的role: false就会生效，这些页面会自动跳过全局role中间件的校验，也不会再出现无限重定向的问题。

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