不管你是用taro uni 還是vue-cli 或者 react-cli 刷新token這塊一通百通 本質上 都一樣
我之前講了一個是 在響應攔截哪里做token刷新 其實這樣做還是不好的,因為這樣我們發起了請求, 相對來說 還是在請求之前做比較好 那樣可以避免 幾次請求吧

因為在 axis 中有幫我們處理的攔截器 在uniapp 中也需要我們做一個攔截器
這里直接使用uniapp插件市場找到的一個。 但是其中很多我們可能用不到 我就給刪減了很多。

在common下創建一個 http.js
我這里的是最簡的版本 什么其他請求和請求日志的都刪除了 只留下我用到的

// 攔截器
export default {
  config: {
    baseUrl: "", // 請求域名的基礎地址
    header: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: {},
    method: "POST", // 默認post請求
    dataType: "json" /* 如設為json，會對返回的數據做一次 JSON.parse */,
    responseType: "text",
    success() {},
    fail() {},
    complete() {},
  },
  interceptor: {
    request: null,
    response: null,
  },
  request(options) {
    if (!options) {
      options = {};
    }
    options.baseUrl = options.baseUrl || this.config.baseUrl;
    options.dataType = options.dataType || this.config.dataType;
    options.url = options.baseUrl + options.url;
    options.data = options.data || {};
    options.method = options.method || this.config.method;

    return new Promise((resolve, reject) => {
      let _config = null;

      options.complete = (response) => {
        let statusCode = response.statusCode;
        response.config = _config;
        if (this.interceptor.response) {
          let newResponse = this.interceptor.response(response);
          if (newResponse) {
            response = newResponse;
          }
        }
        if (statusCode === 200) {
          //成功
          resolve(response);
        } else {
          reject(response);
        }
      };

      _config = Object.assign({}, this.config, options);
      _config.requestId = new Date().getTime();

      if (this.interceptor.request) {
        this.interceptor.request(_config);
      }
      uni.request(_config);
    });
  },
};

然后就是在我們的 request.js中使用了
這里提一句就是 一般來說 token有一個過期時間。我這里判斷的是 在距離過期還有一個小時內。用戶操作 就會刷新token重新延長12個小時(這個token存在時間不同的公司規定應該是不一樣的哦)

let isRefreshing = false, requestQueue = [] // 重新執行隊列
// 請求攔截
  http.interceptor.request = async (config) => {
  	let _userToken = uni.getStorageSync('token')
  	config.header['token'] = _userToken.token
    //無感刷新處理
    const nowTime = parseInt(new Date().getTime() / 1000); //過期前一個小時
    const expireTime = (_userToken.tokenExpiresTime || 0) > 0 ? parseInt(_userToken.tokenExpiresTime) - 3600 : 0;
    if (token && nowTime > expireTime) {
      if (!isRefreshing) { // 一次進入一個刷新token
        isRefreshing = true
        // 刷新token的請求方法 是基于promise 封裝的一個請求方法
        // 我放在了 vuex中的actions中
        const res = await store.dispatch({
          type: 'user/refreshToken',
          token: _userToken.token,
          freshToken: _userToken.freshToken
        })
        uni.setStorageSync('token', res.Data)
        requestQueue.forEach(cb => cb(token));
        isRefreshing = false
        requestQueue = [];  // 清空請求隊列
      }

      const request = new Promise(resolve => {
        requestQueue.push(token => {
          config.header["token"] = token;
          resolve(config);
        });
      });
      return request;
    }

    return config;
  };

這樣用戶就不用抱怨 我在登錄的時候 一直操作著 莫名其妙就掉線了。哈哈哈

關注我 持續更新前端知識。

還有不懂的地方 可以私信我哦