如何在 Node.js 应用程序的客户端站点上处理 JWT 令牌？

Posted 2023-03-10

【中文标题】如何在 Node.js 应用程序的客户端站点上处理 JWT 令牌？

【英文标题】：How to handle JWT token on the client site in Node.js application?

【发布时间】：2018-03-04 21:36:39

【问题描述】：

我正在实施 JWT 令牌以进行身份​​验证。

我没有使用任何客户端站点框架，例如 Angular 或 React。这只是EJS。

第 1 步。我开发了一个 API，成功登录后返回令牌，如下图所示（我正在使用 Postman 测试 API）：

API response with JSON

第 2 步。然后我通过在 Postman 中手动输入来访问受限路由并传递带有令牌值的 Authorization 标头，它工作得很好。

我的问题是在哪里以及如何将步骤 1 中返回的令牌保存在客户端上，以便在步骤 2 的标头中发送。

我是 Web 开发新手并遵循教程，但我发现的所有关于实现 JWT 令牌的教程都是针对客户端站点的 Angular 或 React 编写的。

任何帮助将不胜感激。

谢谢！

【问题讨论】：

你好，罗曼。您能否使用您处理的客户端代码更新您的问题：1. 用户登录 2. 用户身份验证（对于需要身份验证才能访问内容的页面）。但是，通常您会希望使用localStorage，它有一个setItem 方法在本地存储数据（在本例中为令牌），并有一个getItem 方法来检索该数据。那么这只是正确使用令牌的问题。

【参考方案1】：

首先您必须使用 JWT 创建令牌：

const token=jwt.sign(
                userId: user._id
                ,config.secret, expiresIn: '24h');
                res.json(success:true,message:'Success', token:token, user: username:user.username);

然后在你的前面你可以保存到localStorage

这将生成一个您可以在标题中实现的唯一键

之后，当您想检查标头中是否有 JWT 时，只需制作：

router.use((req,res,next)=>
        const token=req.headers['authorization'];
        if(!token)
            res.json(success:false, message:"No token provided");
        
        else
            jwt.verify(token, config.secret, (err,decoded)=>
                if(err)
                    res.json(success:false,message:"Token invalid: " + err);
                
                else
                    req.decoded=decoded;
                    next();
                
            );
        
    );

这是一个中间件，它将检查“授权”标头中是否有 JWT 密钥

请注意，此路由之后的每条路由都将运行此中间件。

Here您将找到有关 JSON Web 令牌的所有详细信息

编辑

以下是您可以如何处理 AJAX 请求：

$("submit").click(function()

    $.ajax(
       url : 'api/login,',
       type : 'POST',
       data : login: $('#login').val(),password:$('#password').val()
       dataType : 'JSON',
       success : function(data, statut)
           localStorage.setItem('token',data.token) // assuming you send a json token
       ,

       error : function(resultat, statut, erreur)
         // whatever code you want
       ,

       complete : function(resultat, statut)

       

    );

);

【讨论】：

感谢您的回复阿祖莱。正如我在帖子中提到的，我已经实现了处理身份验证逻辑的控制器、路由等。任务是在客户端站点上保存并提供令牌。

要在客户端实现 jwt 令牌，您必须使用我提到的本地存储。您从后面获取数据，然后使用 localStorage.setItem('token', data); 将其归因于本地存储。您应该查看我发布的有关本地存储的链接。那么，如果该答案对您有所帮助，您能否投票并将其设置为已解决？谢谢

您好 Azoulay，不幸的是，它并没有完全回答我的问题。我知道这个理论，但我不知道如何实现它。我有一个localhost:3000/api/login 页面，当我输入密码和用户名并提交表单时，控制器将数据传递给 API 端点，该端点返回 json "token":"blabla"。如何检索这些数据以将其保存到本地存储？

@roman_js 要检索此数据，您可以发出 AJAX 请求。在提交时，您调用 API 将提交数据传递到您的服务器，正如您的邮递员所示，它应该在成功时响应令牌数据.之后，您只需要将令牌值与本地存储绑定。

我忘记发送的数据了，再看看编辑。它对你有用吗？

【参考方案2】：

有一个存储令牌的对象，如果您想在用户离开后保留令牌，以便只要令牌有效，他就会保持连接，您可以将其保存在 localStorage 中。

在客户端执行 AJAX 请求时，从 localStorage 的对象中检索令牌并在 Authorization 标头中设置令牌。