umi实现页面无感刷新token

登录返回双token

    @PostMapping("/login")
    public R<LoginUserInfo> login(@RequestBody LoginParamDTO loginParamDTO) {
        //生成两个token
        String accessToken = JwtTokenUtil.createToken(JwtTokenUtil.ACCESS_TOKEN_EXP);
        String refreshToken = JwtTokenUtil.createToken(JwtTokenUtil.REFRESH_TOKEN_EXP);
        //返回其他权限信息
    }

自动携带accessToken

利用axios的请求拦截器，我们可以实现这个功能

axios.interceptors.request.use(
    function(config){
      config.headers = {...config.headers, Authorization : (!!sessionStorage.getItem("accessToken") ? sessionStorage.getItem("accessToken") : '')}
      return config;
    },
    function(error){
      message.error("系统异常，请稍后再试！")
      return Promise.reject(error)
    }
)

accessToken失效校验

利用axios的响应拦截器

//这个是设置响应拦截器的api，第一个成功回调，第二个失败回调
axios.interceptors.response.use(
    function(response){
      const {code,date,msg} = response.data;
      if (code === 401){
       //TODO 刷新token逻辑
      } else {
          //正常访问返回结果值
          return response;
      }
    },
    function(error){
        message.error("系统异常，请稍后再试！")
        return Promise.reject(error);
    }
)

refreshToken刷新accessToken

当业务请求头失效时，利用refreshToken刷新token

//这个是设置响应拦截器的api，第一个成功回调，第二个失败回调
axios.interceptors.response.use(
    function(response){
      const {code,date,msg} = response.data;
      if (code === 401){
        // 返回一个新的 Promise，确保重新发起的请求结果能够传递
        return refreshToken().then(refreshResp=>{
            //刷新token成功
            if (refreshResp?.code === 200){
            } 
        })
      } else {
          //正常访问返回结果值
          return response;
      }
    },
    function(error){
        message.error("系统异常，请稍后再试！")
        return Promise.reject(error);
    }
)

第一次请求失败

使用refreshToken获取新的accessToken

业务接口的重试

业务接口请求失败后不应该立马返回，而是利用刷新后的token再次获取业务信息

//这个是设置响应拦截器的api，第一个成功回调，第二个失败回调
axios.interceptors.response.use(
    function(response){
      const {code,date,msg} = response.data;
      if (code === 401){
        // 返回一个新的 Promise，确保重新发起的请求结果能够传递（也就是传递给第一次的请求，而不是第二次的请求）
        return refreshToken().then(refreshResp=>{
            //刷新token成功
            if (refreshResp?.code === 200){
                sessionStorage.setItem("accessToken",refreshResp.data);
                // 使用原始请求的配置重新发起请求
                return axios.request(response.config);
            } 
        })
      } else {
          //正常访问返回结果值
          return response;
      }
    },
    function(error){
        message.error("系统异常，请稍后再试！")
        return Promise.reject(error);
    }
)

refreshToken的失效处理

当refreshToken失效后需要提示重新登录，并重定向到登陆界面

//这个是设置响应拦截器的api，第一个成功回调，第二个失败回调
axios.interceptors.response.use(
    function(response){
      const {code,date,msg} = response.data;
      if (code === 401){
        // 返回一个新的 Promise，确保重新发起的请求结果能够传递
        return refreshToken().then(refreshResp=>{
            //刷新token成功
            if (refreshResp?.code === 200){
                sessionStorage.setItem("accessToken",refreshResp.data);
                // 使用原始请求的配置重新发起请求
                return axios.request(response.config);
            } else if (refreshResp?.code === 601){
                //方式1
                message.info("登录状态失效，重新登录");
                setTimeout(() => {
                    clearAccessToken();
                    window.location.href = getLoginUrl();
                    return Promise.reject(new Error('Token refresh failed'));
                }, 2000); // 2秒后重定向

                //方式2
                // alert("登录状态失效，重新登录");
                // //清除消息
                // clearAccessToken();
                // window.location.href = getLoginUrl();
                // return Promise.reject(new Error('Token refresh failed'));
            }
        })
      } else {
          //正常访问返回结果值
          return response;
      }
    },
    function(error){
        message.error("系统异常，请稍后再试！")
        return Promise.reject(error);
    }
)

原文地址：https://blog.csdn.net/qq_44462054/article/details/144431209

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！