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请求时，一切都运行得很好。

现在这里是棘手的部分，基本上当我要登录如果这是一个成功然后将我重定向到管理页面，每次我尝试访问admin / *路由我想发送到服务器我的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

Answer 3

由于将JWT保存在localStorage中容易受到XSS攻击，因此另一种方法是将其保存在httpOnly cookie内，但太糟糕了，您无法在前端进行此操作，请选中this post。

您唯一的选择是配置服务器端，使其在httpOnly cookie中返回JWT，并接受httpOnly cookie中的令牌。您还必须考虑如何处理令牌到期。

注意： 虽然现代的浏览器支持并阻止通过httpOnly cookie进行读取/写入，但是我不确定旧的浏览器。

如何存储JWT并使用react发送每个请求

3 个答案: