当 React-query/axios 过期后，如何自动刷新令牌？

Question

因此，我有这个 API，如果您想从中获取任何数据，则必须添加标头'Authorization':'access token'才能访问该 API。为此，'access token'首先您必须使用提供的凭据向 API 发出 POST 请求，它将返回令牌。
但问题是令牌将在 12 小时后过期。由于我正在使用react-query，这就是我访问 API 的方式：

useQuery(['data'], () =>
axios
  .get('/endpoint', { headers: {
      Authorization:`${token}`,
    },
  })
  .then((res) => res.data.data)
);

${token}我手动放置从 Postman API 获得的令牌的变量在哪里（是的，我手动添加了它。我在其中执行了一个发布请求并复制粘贴了它），但是
因为它会在 12 小时后过期。我根本不知道如何自动刷新令牌。
该 API 有一个端点，您可以使用“旧令牌”作为标头刷新令牌，它将返回一个新令牌。
一旦令牌过期，我是否需要使用状态管理来管理令牌？

令牌过期后刷新令牌的最佳方法是什么？

Answer 1

一旦令牌过期，我是否需要使用状态管理来管理令牌？

当然，你可以。您已经将令牌存储在某个地方，因此您可能还可以将过期信息与它一起存储。

您可以选择一百种不同的方式来管理此问题，尽管这取决于您尚未共享的详细信息。

一种方法是创建一个 Axios拦截器来在请求之前检查这一点，并在它即将过期时刷新它。

这是一个例子。

const axios = Axios.create()

const tokenKey = 'auth-token'

const getToken = () => {
    return localStorage.getItem(tokenKey)
}

const setToken = (token) => {
    localStorage.setItem(tokenKey, token)
}

const isTokenExpired = () => {
    const decoded = jwt_decode(getToken)
    return decoded.iat > Date.now()
}

const getRefreshedToken = () => {
    return axios.post('/refresh_endpoint')
}

const refreshToken = async () => {
    const newToken = await getRefreshedToken()
    setToken(newToken)
}

axios.interceptors.request.use(async (req) => {
    if(isTokenExpired()){
        await refreshToken()
    }
})