Nuxt中间件校验路由时调用redirect导致用户状态为null如何解决

问题根本原因 #

1. 中间件内调用redirect后没有终止代码执行，后续逻辑会继续运行，甚至可能多次触发重定向造成死循环，导致中间件被反复执行时偶发拿到null的user
2. 正则表达式使用了不必要的g全局修饰符，多次匹配会出现索引偏移，导致路由匹配逻辑出错
3. 未登录分支的逻辑错误：无参数调用redirect()会触发无效重定向，且直接屏蔽了登录、注册页的未登录访问权限
4. 如果是SSR（服务端渲染）场景，user信息如果存在localStorage中，服务端执行中间件时无法读取客户端本地存储，会直接拿到null的user

修复步骤 #

1. 所有redirect调用后添加return终止中间件执行，将独立的if(user)和if(!user)改为if-else结构避免冗余判断
2. 移除正则的g修饰符
3. 修正未登录分支的逻辑，放开登录、注册页的访问权限，删除无效的无参数redirect
4. SSR场景下将用户登录信息存在cookie中，服务端可以通过请求头的cookie读取用户信息，提前注入store

修复后的中间件代码 #

export default function ({ store, route, redirect}) {
  const user = store.getters["user/user"];
  // 移除正则的g修饰符
  const blockRouteAdmin = /\/admin\/*/;
  const blockRouteManager = /\/manager\/*/;
  const publicPath = ["/signup", "/login"];
  const isPublicPath = publicPath.includes(route.path);
  
  console.log("User", user);
  if (user) {
    if (user.isAdmin) {
      if (!route.path.match(blockRouteAdmin)) {
        return redirect("/admin");
      }
    } else if (user.isManager) {
      if (!route.path.match(blockRouteManager)) {
        return redirect("/manager");
      }
    } else if (user.isUser) {
      if (
        route.path.match(blockRouteAdmin) ||
        route.path.match(blockRouteManager) ||
        isPublicPath
      ) {
        return redirect("/");
      }
    }
  } else {
    console.log("No user");
    // 未登录时不允许访问管理端路由，其余路由（含登录注册）直接放行
    if (
      route.path.match(blockRouteAdmin) ||
      route.path.match(blockRouteManager)
    ) {
      return redirect("/");
    }
  }
}

如果是客户端侧store初始化晚于中间件执行的问题，可以将用户信息初始化逻辑放到优先级更高的插件中执行，保证中间件运行前store已经完成user数据的注入。

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