MERN-stack使用react-router用户身份验证而不使用redux

Posted 2021-03-28

我正在尝试为我的应用程序实现一些身份验证，但是，我有一个简单的问题。我在后端设置了一些基本身份验证，它设置一个令牌并将其发送到前端，并将其保存在cookie中。我读到，只要我正在进行api通话，令牌就会被发送到服务器，但我很难理解我应该怎么做。

我只是读了这个question on stackoverflow，似乎回答这个问题的人只是建议两个辅助函数来检查是否有一个名为token的项目。这对我来说似乎有点安全隐患。难道没有人能设置一个名为token的项目本地存储中的任何随机值吗？这样，这个人可以进入受保护的路线吗？如果是这样，您如何确保JWT实际经过身份验证？

所以，为了打破它，我的问题是：

1. 以上答案是否表明安全风险？
2. 您如何向您的api电话发送JWT以及如何验证？

答案

1. 以上答案是否表明安全风险？

如果使用随机令牌，则api应返回401错误，因此您可以通过清除cookie /本地存储中的令牌值来处理此401错误。

编辑：为了防止用户使用自己输入的令牌值访问私有路由，您可能需要发出api请求来检查私有路由的auth功能中的令牌（这是一个伪造用户将无法获取的选项api无论如何，顺便说一句，请记住，客户端可以访问javascript应用程序代码，这样他就可以“读取”受限制的页面，除非你做SSR，这就是你的敏感数据必须是服务器端的原因）

2. 您如何向您的api电话发送JWT以及如何验证？

取决于你的服务器端实现，即jsonwebtoken或passport和passport-jwt工作得很好。

在客户端，您将使用Authorization或JWT（取决于护照配置）的前缀在每个请求的Bearer标头中发送您的jwt。

使用fetch的示例：

fetch('/api', {
    headers: {
        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ...'
    }
});