reactjs - 如何在 React.js 应用程序中刷新 JWT token ？

Question

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

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

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

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

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

Answer 1

如果您正在使用 Axios(我强烈推荐)，您可以在响应的 interceptors 中声明您的 token 刷新行为。 .这将适用于 Axios 发出的所有 https 请求。
这个过程就像

检查错误状态是否为 401

如果有有效的刷新 token :使用它来获取访问 token

如果没有有效的刷新 token :注销用户并返回

使用新 token 再次重做请求。

下面是一个例子:

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)
    })
  },
)