如何在reactjs中使用刷新令牌

Question

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

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

认证

refresh_token

authentication.action

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,'############')
}
}

我确实在一些博客文章中读到了有关此内容的信息，但确实得到了。

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");
  }
};

任何帮助将不胜感激。

Answer 1

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

检查以下示例：