如何存储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'});

       }
     });
    }
 });
});

然后我保护我的/ admin路由和POSTMAN,每当我发送一个带有jwt的get请求时,一切都运行正常.

现在这里是棘手的部分,基本上当我要登录如果这是一个成功然后重定向我到管理页面,每次我尝试访问管理员/*路线我想发送到服务器我的jwToken但问题是,我该怎么做？我没有使用redux/flux,只使用react/react-router.

我不知道机械师的工作原理.

多谢你们

Answer 1

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

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

Answer 2

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

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

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

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

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