时间戳

首页 > 解决方案 > 如何在javascript fetch中存储访问令牌并传递给下一个api调用

javascript - 如何在javascript fetch中存储访问令牌并传递给下一个api调用

问题描述

我只是想知道是否有人可以帮助我解决这个问题。我获取访问令牌的代码是：

    const inputBody = 'client_id=00000000-0000-0000-0000-000000000001&secret=mySecretPassword';
    const headers = {
      'Content-Type':'application/x-www-form-urlencoded',
    };

    fetch('https://api.replicastudios.com/auth',
    {
      method: 'POST',
      body: inputBody,
      headers: headers
    })
     .then(function(res) {
      return res.json();
    }).then(function(body) {
     console.log(body);
    });

然后，我需要包含从第一次调用中收到的访问令牌，以便将其插入下方。

    const headers = {
    'Authorization':'Bearer {token}'
    };

    fetch('https://api.replicastudios.com/voice',
    {
      method: 'GET',

      headers: headers
        })
    .then(function(res) {
       return res.json();
   }).then(function(body) {
      console.log(body);
    });

保存访问令牌并将其插入第二个请求的最佳方法是什么？

标签： javascriptjwttokenaccess-tokenfetch-api

解决方案

请，再一次，请不要将用户安全令牌存储在会话存储、本地存储、cookies（您自己，让浏览器为您安全地完成）等中。

浏览器有非常棒的方式来处理那些对安全敏感的东西，这些方式可以防止通过 XSS 和其他东西进行会话劫持。

正确的做事方式：在前端调用您的登录（或在您的情况下）身份验证路由，从后端而不是在正文中发送您的安全令牌，您需要将其设置在安全 cookie 中。使用 Node+Express 的常见方法之一是这样的：

 res.status(200)
    .cookie('auth_cookie', token, { httpOnly: true, maxAge: 86400 * 1000, sameSite: 'none', secure: true})
    .json({ success: true, message });

这是其中的一个示例，您应该在这里了解所有这些参数的作用：https ://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector/Cookies

在最后一部分，之后您不需要手动将这些 cookie 包含在彼此的请求中，如果您使用的是 Axios，您可以将{ withCredentials: true }这些安全令牌自动包含在您请求的 cookie 部分中。这里已经有一个很好的线程：让 Axios 在其请求中自动发送 cookie

我知道这看起来很有效，但它会使网络安全（呃）并促进良好的实践。

推荐阅读