如何在 React.js 应用程序中刷新 JWT 令牌？

Question

我在这里检查了所有类似的问题，但没有一个是我需要的。我正在保护我的应用程序中的路由，并随每个请求发送 JWT，这里一切正常。问题是当 JWT 到期时，我需要知道如何刷新该令牌并使用户保持登录状态，而不是注销用户。

每个人都在谈论创建一个处理它的“中间件”，但没有人说如何创建该中间件以及其中有什么？

那么，这样做的最佳实践是什么？我应该在发送任何请求之前检查 JWT 的到期日期吗？或者我应该等待“401”响应然后尝试刷新令牌（我不知道该怎么做），或者究竟是什么？

如果有人在 Github 上有这样的中间件或包或项目的工作示例可以帮助我解决这个问题，那就太好了。

我只对流程的前端部分感兴趣，从反应发送什么以及我应该收到什么以及如何处理它。

Answer 1

如果您正在使用 Axios（我强烈推荐），您可以在响应的拦截器中声明您的令牌刷新行为。这将适用于 Axios 发出的所有 https 请求。

这个过程就像

1. 检查错误状态是否为 401
2. • 如果有一个有效的刷新令牌：使用它来获取访问令牌
   • 如果没有有效的刷新令牌：注销用户并返回
3. 使用新令牌再次重做请求。

下面是一个例子：

axios.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return new Promise((resolve) => {
      const originalRequest = error.config
      const refreshToken = localStorage.get('refresh_token')
      if (error.response && error.response.status === 401 && error.config && !error.config.__isRetryRequest && refreshToken) {
        originalRequest._retry = true

        const response = fetch(api.refreshToken, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            refresh: refreshToken,
          }),
        })
          .then((res) => res.json())
          .then((res) => {
            localStorage.set(res.access, 'token')

            return axios(originalRequest)
          })
        resolve(response)
      }

      return Promise.reject(error)
    })
  },
)