reactjs React刷新令牌的逻辑建议

wlp8pajw 于 2022-12-26 发布在 React

关注(0)|答案(1)|浏览(130)

有人能给我一个自动刷新accessToken的好逻辑吗？
目前，我有一个OpenAPI生成的类，其中accessToken是所有请求中的一个承诺，在这个承诺中，我检查令牌是否过期，并根据刷新令牌获取新的令牌。
我还有一个AuthContext，用于管理我的身份验证、用户详细信息等（保存到本地存储等）
问题是，我需要以某种方式访问我的AuthContext，并在API类中为它提供新的令牌，或者在令牌无法刷新时注销。
我确实收到了有关以下代码的错误，但这是意料之中的：第一个月
我的访问令牌作为承诺（在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);
})

reactjs

来源：https://stackoverflow.com/questions/74898089/logic-recommendation-for-react-refreshing-token

1条答案

按热度按时间

qoefvg9y1#

不久前我遇到了一个类似的问题，是的，你不能在钩子中调用钩子，所以解决这个问题的另一种方法是拦截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函数。

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs React刷新令牌的逻辑建议

1条答案

相关问题

热门标签

最新问答