Question

我正在reactjs中使用redux进行状态管理的管理应用程序。在我的应用中，当用户登录时，它会得到access_token和refresh _token。 access_token在5分钟后失效。 5分钟后令牌无效，无法发出任何api端点请求。

我想知道如何使用此refresh_token更新存储在浏览器access_token中的localStorage。在此之前，我对这个refresh_token一无所知。这是我发出登录请求并保存我的access_token和refresh_token的方式。

身份验证

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上添加令牌到期时间验证，因此，如果您重新加载应用程序或移至下一页，或者如果您进行api调用，它将始终检查令牌到期时间验证，如果令牌已过期，它将进行调用以获取更新令牌

检查以下示例：我给出了带有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)
});

如何在reactjs中使用刷新令牌

1 个答案: