在 JWT 身份验证过程中需要帮助

Question

我正在开发一个用户登录项目。我的前端是 React，我的服务器端是 Node/Express js。我正在尝试了解 JWT 以创建受保护的路由。但是，在将我的令牌（已经成功生成）发送回我的前端应用程序时，我遇到了困难。我正在尝试将令牌存储在 cookie 中，然后将其发送回我的反应端。我的理解是，在我可以访问服务器端的受保护路由之前，我必须将令牌存储在反应端，但我不知道如何继续完成此操作。这是我在服务器上的登录发布请求的代码：

app.post('/userLogin', function(req, res) {
    var {usernameLogin, passwordLogin} = req.query;
    console.log(req.query);
    var validateLogin = `SELECT CustomerID FROM CUSTOMER WHERE Username='${usernameLogin}' AND Password='${passwordLogin}'`;
    mysqlConnection.query(validateLogin, (error, result) => {
        if(error) {
            console.log(error);
        } else {
            // Checks to see if the result object (CustomerID) exists or not.
           if(Object.entries(result).length === 0) {
               console.log('sorry');
           } else {
               console.log(result);
               console.log('existing');

               const token = jwt.sign({ usernameLogin: usernameLogin}, 'loginKey');
               res.cookie('token', token, { httpOnly: true}).sendStatus(200);
               console.log(token);
           }
        } 
    });
});

这是我在我的反应应用程序中的反应 onSubmit（称为登录）。顺便说一句，“成功”消息已成功打印到控制台，但此时我不知道如何在客户端检索和存储令牌以供将来用于访问受保护的路由：

login = (event) => {
    event.preventDefault();
    console.log(this.state);
    fetch('http://localhost:3001/userLogin?usernameLogin=' + this.state.usernameLogin +
          '&passwordLogin=' + this.state.passwordLogin, {method: 'POST'}
    )
    .then(res => {
      if (res.status === 200) {
        console.log("it worked!!!");

      } else {
        console.log('there was a problem at line 27');
      }
    })
  };

任何见解将不胜感激！！！

Answer 1

对于客户端，您可以使用 localStorage 属性存储从服务器端返回的令牌。

设置项目示例：localStorage.setItem("token", <token>);

获取项目的示例：let token = localStorage.getItem("token");

文档：https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage

PS：让我知道是否足以解决您的问题。