如何在前端使用令牌答案

【问题标题】：How to use tokens in front end如何在前端使用令牌
【发布时间】：2022-10-24 00:15:09
【问题描述】：

我正在学习 JWT，但我不知道如何在前端管理令牌（访问令牌和刷新令牌）以发出 HTTP 请求。

例如，当我登录我的页面时，我向服务器发出登录请求，该请求给了我一个 ACCESS 令牌和一个 REFRESH 令牌（保存在 cookie 和用户数据库中）。现在，为了发出其他一些需要验证的 HTTP 请求，我如何将 ACCESS 令牌传输到请求的授权标头？只是把它放在一个变量上？安全吗？

还要考虑我的网站有多个页面，我如何将令牌传递给不同的页面？

我想到的另一个策略是使用我在我的 Cookie 上的刷新令牌（一旦我登录）来制作一个新的访问令牌，但我不知道这个标准管理是如何的。

对不起，如果我不清楚...

谢谢！！

【问题讨论】：

stackoverflow.com/q/1336126/4722345
通常在请求标头中设置Authorization: Bearer ${accessToken}` 是可行的方法，但身份验证取决于服务器实现，如果它不起作用，我建议阅读所述服务器的文档。我们通常使用会话通过页面传递数据。
@Hollyol“会话”是什么意思？会话存储？？我可以将访问令牌传递给会话存储吗？
@Hollyol jwt 是会话的替代品，玩具不要将两者结合起来
jwt通常和spa结合使用，所以如果你没有spa，你更应该使用session

标签： javascript node.js jwt express-jwt

【解决方案1】：

我假设你正在使用 axios，

你可以像这样创建你的 apiInstance

export const apiInstance = axios.create({
  baseURL: YOUR_BASE_URL,
  responseType: 'json',
  headers: {
    //Content-Type: 'CONTENT_TYPE',
    // you dont need to pre-define all headers
  },
})

保存访问令牌以供进一步使用

apiInstance.defaults.headers.common['Authorization'] = `Bearer ${token_here}`

然后，每次您要发出请求时，您只需使用 apiInstance.get/put/patch 等。访问令牌已保存并可重复使用。如果过期，您将不得不刷新它，在这种情况下，您需要将刷新令牌保存在某个地方，不建议使用本地存储，但可以作为开始使用。

【讨论】：

谢谢。我不知道axios，但我会检查一下。另一个问题，当我想刷新令牌时，我只是在访问令牌过期时还是在每个请求中都这样做？我该如何实现呢？我是否在页面中放置了一个需要确认仍然存在的客户的模式？