Strapi结合React获取登录用户信息时接口报401未授权错误

GET http://localhost:1337/api/users/me 是Strapi用户权限插件内置的鉴权接口，本身不支持匿名访问，返回401未授权错误的核心原因是请求未携带有效身份凭证，和你检查的公开权限配置无关。你当前的代码直接裸调接口，没有在请求头中携带用户登录后获取的JWT令牌，自然会被服务端拦截。
另外你的代码还有一处逻辑错误：/api/users/me接口会直接返回当前登录用户的信息对象，不存在外层data嵌套，原来写的setUsers(data.data)就算鉴权通过也拿不到正确值。

• 补全登录流程的令牌存储逻辑
  调用登录接口POST /api/auth/local拿到成功响应后，必须把返回的jwt字段存在本地存储中，示例登录逻辑：

  // 登录方法示例
  const handleLogin = async (account, pwd) => {
    const { data } = await axios.post('http://localhost:1337/api/auth/local', {
      identifier: account,
      password: pwd
    })
    // 存储JWT和基础用户信息
    localStorage.setItem('strapi_token', data.jwt)
    localStorage.setItem('user_info', JSON.stringify(data.user))
  }
  

• 给/api/users/me请求添加鉴权头
  从本地存储取出提前存好的JWT，按照Bearer <token>的格式放到请求的Authorization头中，修正后的请求代码如下：

  const [error, setError] = useState(null);
  const [userInfo, setUserInfo] = useState(null);
  
  useEffect(() => {
    const token = localStorage.getItem('strapi_token')
    // 无令牌说明用户未登录，直接返回登录提示
    if (!token) {
      setError(new Error('当前未登录，请先登录后查看个人信息'))
      return
    }
  
    axios
      .get('http://localhost:1337/api/users/me', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
      .then(({ data }) => setUserInfo(data))
      .catch((err) => {
        // 捕获401场景：一般是token过期、伪造，此时清空本地无效凭证，引导重新登录
        if (err.response?.status === 401) {
          localStorage.removeItem('strapi_token')
          localStorage.removeItem('user_info')
          // 此处可添加跳转登录页的逻辑
        }
        setError(err)
      })
  }, [])
  
  if (error) {
    return <div>请求出错: {error.message}</div>;
  }
  

• 兜底权限检查
  如果加了令牌还是返回401，去Strapi后台「设置」-「用户及权限」-「角色」页面，选中「Authenticated（认证用户）」角色，确认User分类下的me接口权限处于勾选状态，保存配置后重试。

  注意：不要给/users/me接口开放匿名访问权限，会造成严重的数据泄露风险。

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