React刷新token的邏輯推薦

Question

任何人都可以建議我一個好的邏輯來自動刷新我的 accessToken 嗎？

目前，我有一個OpenAPI 生成的類，其中accessToken 是所有請求中的承諾。 在這個承諾中，我檢查令牌是否過期並根據刷新令牌獲取新令牌。

我還有一個AuthContext ，用於管理我的身份驗證、用戶詳細信息等（保存到本地存儲等）

問題是我需要以某種方式訪問我的 AuthContext 並在我的 API 類中為其提供新令牌或在無法刷新令牌時注銷。

我確實收到以下代碼的錯誤，但這是預料之中的： Invalid hook call. Hooks can only be called inside of the body of a function component. Invalid hook call. Hooks can only be called inside of the body of a function component.

我的訪問令牌作為承諾（在 API 類中）

accessToken: new Promise<string>(async (resolve, reject) => {
    const tokenExpiresAt = Date.parse(model.tokenExpiration);
    const {saveAuth, logout} = useAuth()  // Here is the problem

    // if token is expired, refresh it
    if (tokenExpiresAt < Date.now()) {
        this.Auth.refresh({accessToken: model.token, refreshToken: model.refreshToken})
            .then((response) => {
                // save new auth
                saveAuth(response.data)
                resolve(response.data.token);
            })
            .catch((error) => {
                // error refreshing token, logout
                logout()
                reject("Token expired");
            });
    }

    resolve(model.token);
})

Answer 1

我前一段時間遇到過類似的問題，是的，你不能在鈎子內調用鈎子，所以解決這個問題的另一種方法是攔截axios響應攔截器。

axiosApiInstance.interceptors.response.use((response) => {
  return response
}, async function (error) {
  const originalRequest = error.config;
  if (error.response.status === 403 && !originalRequest._retry) {
    originalRequest._retry = true;
    const refreshToken = localStorage.getItem('refreshToken');
    const access_token = await refreshAccessToken(refreshToken);            
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + access_token;
    return axiosApiInstance(originalRequest);
  }
  return Promise.reject(error);
});

並且您可以根據您的用usecase實現自己的refreshAccessToken功能。