uniapp之token无感刷新

uniapp之token无感刷新

徐徐
前端
发布于2024-08-20 15:23:11
🌺前言
uniapp的token无感刷新实现之一

typescript
const request = <T = ResponseType>(
  options: Record<string, any>
): Promise<T> => {
  return new Promise((resolve, reject) => {
    const token = getToken();
    const VITE_TOKEN_KEY = import.meta.env.VITE_TOKEN_KEY;
    // 设置请求头
    const header = {
      "Content-Type": "application/json",
      [VITE_TOKEN_KEY]: token,
      ...options.header, // 可以传入额外的请求头参数
    };
    let url = import.meta.env.VITE_APP_BASE_API + options.url;

    if (options.params && typeof options.params === "object") {
      url = objectToQuery(url, options.params);
    }
    uni.showLoading({
      title: "加载中...",
    });
    uni.request({
      url,
      method: options.method || "GET",
      data: options.data || {},
      header: header,
      success: async (res) => {
        uni.hideLoading();
        const resp = res.data as T;
        if (resp.status === 401) {
          const params = getAccount()
          if (!params) {
            // 缓存中没有用户信息重新登陸
            return redirectToLogin();
          }
          // 登录过期
          if (!isRefreshing) {
            isRefreshing = true
            try {
              const token = await refreshToken(params);
              setToken(token)
              const resTemp =  request(options)
              // 执行异步队列中的请求
              requests.forEach(cb => cb(token))
              requests = []
              isRefreshing = false
              return resolve(resTemp)
            } catch (error) {
              // 如果第二次獲取token也失败则重新登录
              isRefreshing = false
              return redirectToLogin();

            }
          } else {
            // 请求新token期间将异步请求加入异步队列
            return new Promise((resolve) => {
              // 将resolve放进队列,用一个函数形式来保存,等token刷新后直接执行
              requests.push(() => {
                resolve(request(options))
              })
            })
          }

        } else {
          // 正常请求
          if (res.data instanceof ArrayBuffer) {
            resolve(res as T);
          } else {

            if (resp.status !== SUCCESS_CODE) {
              uni.showToast({
                title: resp.message,
                duration: 2000,
                icon: "none",
              });
            }
            // if (resp.status === 401) {
            //   //  未授权
            //   redirectToLogin();
            // } 
            else {
              resolve(resp);
            }
          }
        }

      },
      fail: (err) => {
        uni.showToast({
          title: "系统异常",
          icon: "error",
          duration: 2000,
        });
        reject(err);

      },
      fiinally() {
        // 隐藏加载框
        uni.hideLoading();
      },
    });
  });
};
文章最后更新于 2024-08-20 15:23:11
留言
暂无数据

~~空空如也