Vue Router导航守卫异常：requiresAuth未解析+无效导航守卫错误

1. IDE提示requiresAuth为未解析变量 #

• 原因：Vue Router默认的路由meta类型未定义requiresAuth这个自定义字段，IDE无法识别该属性。
• 解决办法：
  • TypeScript项目：在项目中创建router.d.ts文件，扩展路由Meta类型：

    import 'vue-router';
    
    declare module 'vue-router' {
      interface RouteMeta {
        requiresAuth?: boolean;
      }
    }
    

  • JavaScript项目：给目标字段添加JSDoc注释，让IDE识别：

    if(to.matched.some((record)=> /** @type {boolean} */ (record.meta.requiresAuth))){
    

2. 控制台抛出Error: Invalid navigation guard错误 #

• 原因：导航守卫要求所有分支必须调用next()完成导航。当前代码仅在路由需要权限时调用了next()，但对不需要权限的路由（如首页）未做处理，导致路由导航阻塞，Vue Router判定守卫无效。
• 解决办法：添加默认分支调用next()，覆盖所有路由场景：

  router.beforeEach(async (to, from, next)=>{
      if(to.matched.some((record)=> record.meta.requiresAuth)){
          const currentUser = await getCurrentUser();
          // 此处无需再次await currentUser，已通过getCurrentUser()获取到结果
          if(currentUser){
              next()
          } else {
              next("/about")
          }
      } else {
          // 处理无需权限校验的路由
          next()
      }
  });
  

3. 代码无法执行到第一个if语句之后 #

• 原因：和上述导航守卫错误直接相关——未处理无需权限的路由分支，导致守卫一直处于pending状态，后续逻辑无法执行；另外原代码中if(await currentUser)的多余await也可能引发逻辑异常。
• 解决办法：按照上述代码修改，补充默认分支的next()调用，同时移除currentUser前的多余await。

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