reactjs - 如何在reactjs中使用刷新 token

Question

我正在 reactjs 中开发一个管理应用程序，它使用 redux 进行状态管理。在我的应用程序中，当用户登录时它得到 access_token和 refresh _token . access_token 5 分钟后过期。 5 分钟后 token 变为无效，无法发出任何 api 端点请求。

我想知道我应该如何使用这个 refresh_token更新我的 access_token存储在 localStorage浏览器的。我不知道这个 refresh_token在这之前。这就是我如何提出登录请求并保存我的 access_token和 refresh_token .

authentication

export  const Authentication = async(payload) =>{
    try{
    const response = await fetch(`${generalConfig.baseURL}/oauth/token`, {
        method: 'POST',
        cache: 'no-cache',
        headers: {
            'Authorization': `Basic ${btoa("topseller:topseller")}`,
            'Accept': '*/*',
            // 'Content-Type': 'multipart/form-data',
            'accept-encoding': 'gzip, deflate',

        },
        body: payload
    })
    .then((response)=>{
        console.log(response)
        return response.json()
    },err=>{
       console.log(err,'############')
    })
    console.log(response,'@@@@@@@@@')
    return response;
}catch(err){
    console.log(err,'############')
}
}

authentication.action

export const getAccessToken = (dataToSend) => async (dispatch) => {
  try {
    var formData = ConvertToFormData(dataToSend);
    const authResponse = await Authentication(formData);   <-- See above about this Authentication function

    const response = await fetch("http://api.smartocart.com/userType", {
      method: "GET",
      cache: "no-cache",
      headers: {
        Authorization: `Bearer ${authResponse.access_token}`,
      },
    });
    const payload = await response.json();

    if (payload.status === "admin") {
      SaveToLocalStorage("access_token", authResponse.access_token);
      SaveToLocalStorage("refresh_token", authResponse.refresh_token);
      dispatch({
        type: GET_ACCESS_TOKEN,
        payload: {
          access_token: authResponse.access_token,
          refresh_token: authResponse.refresh_token,
        },
      });
    } else {
      dispatch({
        type: ERROR_ACCESS_TOKEN,
        buttonPressed: true,
      });
    }
  } catch (exception) {
    console.log("Log In again");
  }
};

我确实在一些博客文章中读到过这个，但我确实得到了这个。 https://nmajor.com/posts/access-and-refresh-token-handling-with-redux
任何帮助将不胜感激。

Answer 1

您可以在 app.js 上添加 token 到期时间验证，因此如果您重新加载应用程序或移动到下一页，或者如果您进行 api 调用，它将始终检查 token 到期时间验证，如果 token 已过期，它将调用获取更新 token

检查下面的例子:我给出了 react axios 的例子

axios.interceptors.request.use(async (config) => {
  const expireAt = localStorage.getItem('expiresAt');
  let token = localStorage.getItem('authToken');
  if (dayjs(expireAt).diff(dayjs()) < 1) {
    const data = onGetForcedToken();
    token = typeof data === 'string' ? data : await data();
  }
  // setting updated token
  localStorage.setItem('authToken', token);
  return config;
}, (err) => {
   console.log("error in getting ",err)
});