浏览器提供了各种持久化数据的解决方案。当存储令牌时，您应该权衡存储选择与安全风险。

译自Best Practices for Storing Access Tokens in the Browser。

web应用程序不是静态站点，而是静态内容和动态内容的精心组合。更常见的是，web应用程序逻辑在浏览器中运行。与从服务器获取所有内容不同，应用程序在浏览器中运行JavaScript，从后端API获取数据，并相应地更新web应用程序呈现。

为了保护数据访问，组织应该采用OAuth 2.0。通过OAuth 2.0，JavaScript应用程序需要在对API的每个请求中添加访问令牌。出于可用性原因，JavaScript应用程序通常不会按需请求访问令牌，而是存储它。问题是，如何在JavaScript中获取这样的访问令牌？当您获取一个令牌时，应用程序应该在哪里存储令牌，以便在需要时将其添加到请求中？

本文讨论了浏览器中可用的各种存储解决方案，并突出了与每种选择相关的安全风险。在审查威胁之后，它描述了一种解决方案，以提供最佳的浏览器安全选项，用于必须与OAuth保护的API集成的JavaScript应用程序。

获取访问令牌

在应用程序可以存储访问令牌之前，它需要先获取一个令牌。当前的最佳实践建议通过“授权码流”这一方式来获取访问令牌: 授权码流是一个两步流程，首先从用户那里收集一个授权许可——授权码，然后应用程序在后台通道中用授权码交换访问令牌。这个请求称为令牌请求，例子如下:

const accessToken = await fetch(OAuthServerTokenEndpoint, {
method: "POST",
// token request with authorization code and PKCE
// submits data in as x-www-form-urlencoded encoded format
body: new URLSearchParams({
 client_id: "example-client",
grant_type: "authorization_code",
code: authorization_code,
 code_verifier: pkce_code_verifier
})
})
// server responds with JSON object
.then (response => response.json())
.then (tokenResponse => {
  // parse access token from response
  if (tokenResponse.accessToken) {
    return tokenResponse.accessToken;
  } // else handle error response
})
.catch( 
// handle network error
)