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

Posted 2023-03-10

【中文标题】如何在javascript fetch中存储访问令牌并传递给下一个api调用

【英文标题】：How to store access token and pass to next api call in javascript fetch

【发布时间】：2021-11-10 01:40:28

【问题描述】：

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

    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);
    );

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

【问题讨论】：

建议正确的标签是fetch-api

谢谢。我编辑了问题并更正了标签。

【参考方案1】：

请，再一次，请不要将用户安全令牌存储在会话存储、本地存储、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 部分要求。这里已经有一个很好的线程：Make Axios send cookies in its requests automatically

我知道这看起来很有效，但它会确保网络安全（呃）并促进良好做法。

【讨论】：

根据问题的上下文，OP 无法访问后端，因为它是第三方 API，因此他/她无法发送响应 cookie

【参考方案2】：

如果您的代码位于看起来像的浏览器中，您可以将访问令牌保存到会话存储中以供将来调用。关闭选项卡时，会话存储将被清除。

    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);
 // NEW CODE
 // body.access_token is my guess, you might have to change this
 // based on the response
 window.sessionStorage.setItem('access_token', body.access_token)
);

然后您可以使用以下方式获取访问令牌：

window.sessionStorage.getItem('access_token')

【讨论】：

人们，不要这样做。这是等待发生的安全灾难。

谢谢大家的回答。我对如何正确完成有了更好的了解。谢谢。