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

Posted 2023-03-10

【中文标题】在 JWT 身份验证过程中需要帮助

【英文标题】：Need assistance with the JWT authenticate process

【发布时间】：2020-07-25 10:07:57

【问题描述】：

我正在开发一个用户登录项目。我的前端是 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');
      
    )
  ;

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

【参考方案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：让我知道是否足以解决您的问题。

【讨论】：

感谢您的帮助！如果我能够接受两个答案，我也会接受你的！您使用本地存储的想法比 cookie 好得多，并且您提供的文档非常有用（我似乎很难找到好的文档）。再次感谢！

没问题，很高兴为您提供帮助。