Vue路由守卫调用supabase.auth.getUser()报missing sub claim错误

问题根源 #

你在未登录状态下调用supabase.auth.getUser()时，Supabase会尝试解析匿名会话的JWT，但匿名密钥对应的JWT payload里确实没有sub（用户唯一标识）字段，而getUser()方法会强制校验这个字段，所以抛出了错误。登录后使用的是已认证用户的JWT，自带sub字段，因此错误消失。

解决方案 #

1. 用getSession()替代getUser()判断登录状态

getSession()不会强制校验JWT的sub字段，它仅返回当前会话信息，未登录时返回null，完全能满足路由守卫的登录状态判断需求，还能避免校验错误。

2. 修正路由守卫的异步逻辑

router.beforeEach支持异步函数，只需确保正确处理next()的调用时机即可。

修改后的完整路由守卫代码：

// Route guard for auth routes
router.beforeEach(async (to, from, next) => {
  const { data: { session } } = await supabase.auth.getSession();
  const user = session?.user;

  if (to.matched.some((res) => res.meta.auth)) {
    if (user) {
      next();
      return;
    }
    next({ name: "Login" });
    return;
  }
  next();
});

备选方案（不推荐） #

如果一定要用getUser()，可以通过捕获错误避免控制台报错，但这种做法不如getSession()简洁优雅：

router.beforeEach(async (to, from, next) => {
  let user = null;
  try {
    const { data: { user: authUser } } = await supabase.auth.getUser();
    user = authUser;
  } catch (e) {
    // 捕获匿名会话的JWT校验错误，不做额外处理
  }

  if (to.matched.some((res) => res.meta.auth)) {
    if (user) {
      next();
      return;
    }
    next({ name: "Login" });
    return;
  }
  next();
});

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