未登录时调用Supabase getUser()出现401错误求解决

错误含义 #

• 401 Unauthorized：请求未获授权，当前不存在有效登录会话。
• invalid claim: missing sub claim：supabase.auth.getUser()接口需要从请求携带的JWT令牌中读取sub（用户唯一标识）字段，未登录时无合法JWT，自然缺失该字段，因此触发错误。

解决办法 #

你的代码核心问题是把未登录时的预期错误当成异常抛出——用户未登录时，supabase.auth.getUser()返回error属于正常逻辑，无需用throw error触发catch分支。修改代码如下：

useEffect(() => {
  const getUser = async () => {
    const { data: { user }, error } = await supabase.auth.getUser();
    
    if (error) {
      // 未登录或认证失败，设置未认证状态
      setIsAuthenticated(false);
      setUserId(null);
      console.log("未登录或认证失败: ", error.message);
      return;
    }
    
    if (user) {
      setIsAuthenticated(true);
      setUserId(user.id);
    } else {
      // 极端情况：无错误但无用户
      setIsAuthenticated(false);
      setUserId(null);
    }
  };
  getUser();
}, []);

另外推荐使用Supabase官方更优的状态监听方案，无需主动调用getUser()，可实时响应登录/登出状态变化：

useEffect(() => {
  const unsubscribe = supabase.auth.onAuthStateChange((event, session) => {
    if (session?.user) {
      setIsAuthenticated(true);
      setUserId(session.user.id);
    } else {
      setIsAuthenticated(false);
      setUserId(null);
    }
  });

  // 组件卸载时取消监听，避免内存泄漏
  return () => unsubscribe();
}, []);

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