supabase.auth.getUser() 在 vue-router 路由防护上返回错误

我正在尝试构建一个使用 Supabase 身份验证的 Vue 应用程序。在路由器文件中的一个路由防护中，我实现了supabase.auth.getUser()为了检索阻止条件的用户登录状态next()在用户通过身份验证之前执行：

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

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

但是，当我实施supabase.auth.getUser()在路由器防护内部，登录前我在控制台中收到以下错误：“无效声明：缺少子声明”。登录后，错误消失。如果我删除supabase.auth.getUser如果有路由守卫的条件，错误也会消失。经过一些额外的在线挖掘并在 jwt.io 中运行我的 Supabase 匿名密钥后，我的密钥似乎在有效负载中缺少子声明。如果这导致密钥无法正确验证，我该如何解决？

您应该检查会话而不是用户。用户将尝试首先检查 JWT，由于您尚未登录，因此在检查时该 JWT 不存在。使用getSession反而：

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

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