React-umi-request动态刷新Token功能实现及node.js 代码逻辑

在Antd-pro里面,使用的是umi-request,为了实现动态刷新token,我使用了拦截器。

拦截器更新token有两种:

方法一:在请求发起前拦截每个请求,判断token的有效时间是否已经过期,若已过期,则将请求挂起,先刷新token后再继续请求。

  • 优点: 在请求前拦截,能节省请求,省流量。
  • 缺点: 需要后端额外提供一个token过期时间的字段 refreshTime ;使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时,拦截会失败。

方法二:拦截返回后的数据。先发起请求,接口返回过期后,先刷新token,再进行一次重试。

  • 优点:不需额外的token过期字段,不需判断时间。
  • 缺点: 会消耗多一次请求,耗流量。

综上考虑,方法一和二优缺点是互补的,方法一有校验失败的风险(本地时间被篡改时,当然一般没有用户闲的蛋疼去改本地时间的啦),方法二更简单粗暴,等知道服务器已经过期了再重试一次,只是会耗多一个请求。

我看有的博主用了方法二,我个人更喜欢方法一,(原因就是有的请求要求并发,for循环,一次出去10个请求,所以嘛。。。)

下面是实现过程

/**
 * request 网络请求工具
 * 更详细的 api 文档: https://github.com/umijs/umi-request
 */
import { extend } from ‘umi-request‘;
import { notification } from ‘antd‘;
import { routerRedux } from ‘dva/router‘;
import { getUserToken, saveUserToken, clearAuthority } from ‘./authority‘;
import jwt_decode from ‘jwt-decode‘
const codeMessage = {
  200: ‘服务器成功返回请求的数据。‘,
  201: ‘新建或修改数据成功。‘,
  202: ‘一个请求已经进入后台排队(异步任务)。‘,
  204: ‘删除数据成功。‘,
  400: ‘发出的请求有错误,服务器没有进行新建或修改数据的操作。‘,
  401: ‘用户没有权限(令牌、用户名、密码错误)。‘,
  403: ‘用户得到授权,但是访问是被禁止的。‘,
  404: ‘发出的请求针对的是不存在的记录,服务器没有进行操作。‘,
  406: ‘请求的格式不可得。‘,
  410: ‘请求的资源被永久删除,且不会再得到的。‘,
  422: ‘当创建一个对象时,发生一个验证错误。‘,
  500: ‘服务器发生错误,请检查服务器。‘,
  502: ‘网关错误。‘,
  503: ‘服务不可用,服务器暂时过载或维护。‘,
  504: ‘网关超时。‘,
};
/**
 * 异常处理程序
 */

const errorHandler = error => {
  const { response } = error;

  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: ‘您的网络发生异常,无法连接服务器‘,
      message: ‘网络异常‘,
    });
  }

  return response;
};
/**
 * 配置request请求时的默认参数
 */

const request = extend({
  errorHandler,
  // 默认错误处理
  credentials: ‘include‘, // 默认请求是否带上cookie
});

let _cacheRequest = [];
let guoqi = true;
let ispending = false;
request.interceptors.request.use(async (url, options) => {

    const token = getUserToken();
    if( token ){
        //如果有token 就走token逻辑
        const headers = {
            Authorization: `Bearer ${token}`,
        };
        //如果是刷新token接口,就直接过,不要拦截它!!!
        if( url === ‘/weiqinketop/api/account/login/getnewtoken‘){
            return ({
                url: url,
                options: { ...options, headers: headers },
            });
        }
        let decodeToken = jwt_decode(token);
        const { iat, exp, refreshTime } = decodeToken;
        const maxTime = exp*1000+refreshTime;
        const nowTime = new Date().getTime();
        console.log( parseInt((maxTime - nowTime)/1000) +‘秒后重新登录‘)
        if( nowTime >= maxTime){
            //token过期,而且延期token也过去了,那么,清空你的数据,直接返回登录,不允许操作了
            console.log(‘超时了‘)
            clearAuthority()
            location.href = ‘/user/login‘
            return;
        }
        console.log( parseInt((exp*1000 - nowTime)/1000) + ‘秒后第一个过期‘ )
        if( nowTime >= exp*1000 ){
            //只是过期了,那就去拿新的token
            if( ispending ){
                //如果正在发送中,此请求就等一会吧,生成一个Promise 等新token返回的时候,我再resolve
            }else{
                //如果没发送,立刻改为发送状态
                ispending = true;
                //如果过期了还没请求新token,那就请求新token 记得带上旧token
                request(‘/weiqinketop/api/account/login/getnewtoken‘,{
                    method: ‘POST‘,
                    data:{}    
                }).then((res)=>{
                    if( res.status === 200 ){
                        ispending = false;
                        let token = res.token;
                        saveUserToken( token )
                        _cacheRequest.map(cb => cb())
                    }
                })

            }
            return new Promise((resolve, reject) => {
                _cacheRequest.push(() => {
                    resolve()
                })
            });
        }
        return ({
            url: url,
            options: { ...options, headers: headers },
        });
    }
    return ({
        url: url,
        options: options,
    });
})
//第二个拦截器,为什么会存在第二个拦截器呢?就是因为第一个拦截器有可能返回Promise,那么Promise由第二个拦截器处理吧。之前因为这个问题跟umi提了issues。原来是我没搞明白。。。
request.interceptors.request.use(async (url, options) => {
    const token = getUserToken();
    if( token ){
        //如果有token 就走token逻辑
        const headers = {
            Authorization: `Bearer ${token}`,
        };
        return ({
            url: url,
            options: { ...options, headers: headers },
        });
    }
    return ({
        url: url,
        options: options,
    });



})
export default request;

说下中途遇到的问题吧,原本只有第一个拦截器,返回Promise,总是会造成请求二次重发,我后来请教官方,得知 resolve( request( url, options) ) 导致的重发请求,现在已经进行了修复,可以正常使用了,后台使用的node.js KOA,下面贴下代码吧

/**** Token功能类 ****/
const jwt = require(‘jsonwebtoken‘);
/**** secret编码 ****/
const secret = ‘002c6‘;
/*****
 * 过期时间延长24小时
 */
// const refreshTime = 86400000;
/*****
 * 过期时间延长10s
 */
const refreshTime = 10000;

class Token{
     constructor() {
        this.jwt = jwt;
        this.secret = secret;
    }
    /*******生成的格式就是{alg: "HS256",typ: "JWT"}.{name: "你的名字字段",refreshTime: 10000,iat: 1573704935,exp: 1573704947.[signature] */
    createToken( payload , dateStr ){
        payload.refreshTime = refreshTime;
        return this.jwt.sign(payload, this.secret, { expiresIn: dateStr });
    }
}

// module.exports = {
//   proToken : new Token()
// }

exports.proToken = new Token()

 

文章来自:https://www.cnblogs.com/qkstart/p/11856168.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3