如何存储 JWT 并使用 react 在每个请求中发送它们

Question

很高兴知道，因为我的基本注册/身份验证系统正在运行。

所以基本上我得到了这个：

 app.post('/login', function(req,res) {
 Users.findOne({
email: req.body.email
}, function(err, user) {
if(err) throw err;

if(!user) {
  res.send({success: false, message: 'Authentication Failed, User not found.'});
} else {
  //Check passwords
  checkingPassword(req.body.password, user.password, function(err, isMatch) {
    if(isMatch && !err) {
      //Create token
      var token = jwt.sign(user,db.secret, {
        expiresIn: 1008000
      });
      res.json({success: true, jwtToken: "JWT "+token});
    } else {
      res.json({success: false, message: 'Authentication failed, wrong password buddy'});

       }
     });
    }
 });
});

然后，每当我发送带有标头中的 jwt 的 get 请求时，我都会使用 POSTMAN 保护我的 /admin 路由，一切正常。

现在这是棘手的部分，基本上当我要登录时，如果成功，然后将我重定向到管理页面，每次我尝试访问 admin/* 路由时，我想将我的 jwToken 发送到服务器，但问题是，我该如何实现呢？我没有使用 redux/flux，只是使用 react/react-router。

我不知道机械师是如何工作的。

多谢你们

原文由 MaieonBrix 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不要将令牌存储在 localStorage 中，使用 xss 攻击可能会破坏令牌。我认为最好的解决方案是在登录操作时向客户端提供访问令牌和刷新令牌。将访问令牌保存在内存中（例如 redux 状态），并且应该在服务器上使用 httpOnly 标志创建刷新令牌（如果可能，还要使用安全标志）。访问令牌应设置为每 2-3 分钟过期一次。为了确保用户不必每 2-3 分钟输入他的凭据，我有一个间隔，在当前令牌到期之前调用 /refreshToken 端点（静默刷新令牌）。

这样，访问令牌就不会被 xss/csrf 破坏。但是使用 xss 攻击，攻击者可以代表您调用 /refreshToken 端点，但这不会有害，因为返回的令牌不会被破坏。

原文由 itay312 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

1- 登录组件向 API 服务器端点发送登录请求

2- 服务器 API 端点返回令牌

3- 我将令牌保存在用户的 localStorage 中

4- 从现在开始的所有 API 调用都将包含在标头中

示例： https ://github.com/joshgeller/react-redux-jwt-auth-example

安全更新： 正如@Dan 在评论中提到的那样，令牌不应存储在 Localstorage 中，因为每个 javascript 脚本都可以访问该脚本，这意味着您不拥有的第三方脚本可以访问令牌并用它做任何他们想做的事。

更好的地方是将其存储为带有 HttpOnly 标志的 Cookie。

原文由 Tien Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议