封装实现refToken对象

2022-03-21

最近公司买了一个第三方的框架, 我自己实现小程序端和其他自建系统都需要接入那边的用户信息, 我看了一下他们的用户信息刷新Token实现是通过写定时器, 10秒检查一次token来实现token刷新的, 我感觉这个方式不太优雅, 所以打算自己重写实现一下

思路

使用axios的拦截器, 拦截所有请求, 每次请求前都去那道上次token过期时间跟当前时间对比, 过期就将本次任务加入队列, 刷新token后统一回调当前任务. 利用Promise, 将resole存到队列中

储存Token到缓存

1 2	export const saveToekn = (token: string) => localStorage.setItem(TOKEN, JSON.stringify({ token, exp: Data.now() + TOKENEXP }))

按道理过期时间应该是后端从接口返回, 毕竟是可以配置的, 但是他们这个框架没有返回, 只能前端写死一个;

从缓存读取Token

1 2	export const getToken = ():{exp:number, token?:string} => JSON.parse(localStorage.getItem(TOKEN)\|\|'{"exp":0}')

简易拦截Token实现

class tokenMange {
 public async getToken(): Promise<string> {
    const { token, exp } = getToken();
    if (Date.now() > exp) return await this.refToken();
    else return token;
  }
  private async refToken(): Promise<string> {
    const refToen = getRefToken();
    if (!refToen) throw 401;
    const data = await refreshToken(refToen);
    setToken(data.access_token);
    setRefToken(data.refresh_token);
    return data.access_token;
  }
}

其实建议的token拦截很容易实现, 但是在项目中我们会遇到那种一次发出好几个请求都过期的时候, 然后就会刷新好几次token, 这个问题其实能解决的

队列实现

export default class tokenMange {
  private queueList: ((token: string) => void)[] = [];
  private rejectList: (() => void)[] = [];
  private isLock = false;
  public async getToken(): Promise<string> {
    const { token, exp } = getToken();
    if (Date.now() > exp) return await this.queueMange();
    else return token;
  }
  private queueMange(): Promise<string> {
    return new Promise((resolve, reject) => {
      this.queueList.push(resolve);
      this.rejectList.push(reject);
      if (this.isLock) return;
      this.isLock = true;
      this.refToken()
        .then(token => {
          this.clearQuene(token);
        })
        .catch(() => this.clearFail())
        .finally(() => (this.isLock = false));
    });
  }
  private async clearQuene(token: string) {
    let cb: ((token: string) => void) | undefined;
    while ((cb = this.queueList.shift())) {
      cb(token);
    }
  }
  private clearFail() {
    let cb: (() => void) | undefined;
    while ((cb = this.rejectList.shift())) {
      cb();
    }
  }
  private async refToken(): Promise<string> {
    const refToen = getRefToken();
    if (!refToen) throw 401;
    const data = await refreshToken(refToen);
    setToken(data.access_token);
    setRefToken(data.refresh_token);
    return data.access_token;
  }
}

这里给自己设置一个锁, 在刷新token的时候就把Promise加入队列, 处理完成后再去处理队列就可以了