// request.js import Request from "luch-request"; import qs from "qs"; import { ref } from "vue"; import config from "@/utils/config"; import errorCode from "@/utils/errorCode"; import { getTenantId, getUserId, getAccessToken, getRefreshToken, setToken, } from "@/utils/auth.js"; import { refreshToken } from "@/api/login"; import $store from "@/store"; import { localeFormatObj } from "@/utils/format"; const options = { // 显示操作成功消息 默认不显示 showSuccess: false, // 成功提醒 默认使用后端返回值 successMsg: "", // 显示失败消息 默认显示 showError: true, // 失败提醒 默认使用后端返回信息 errorMsg: "", // 显示请求时loading模态框 默认显示 showLoading: true, // loading提醒文字 loadingMsg: "加载中", // 需要授权才能请求 默认放开 auth: false, // ... }; // 需要忽略的提示。忽略后,自动 Promise.reject('error') const ignoreMsgs = [ "无效的刷新令牌", // 刷新令牌被删除时,不用提示 "刷新令牌已过期", // 使用刷新令牌,刷新获取新的访问令牌时,结果因为过期失败,此时需要忽略。否则,会导致继续 401,无法跳转到登出界面 ]; // 是否显示重新登录 export let isRelogin = { show: false, }; // 定义请求配置 const defaultOptions = { baseURL: config.default.apiUrl + config.default.apiUrlSuffix, // 基础URL method: "GET", // 默认请求方法 timeout: 10000, // 请求超时时间 header: { "Content-Type": "application/json", }, withToken: true, // 是否携带token throttleDelay: 500, // 节流延时 debounceDelay: 1000, // 防抖延时 custom: options, }; // Loading全局实例 let LoadingInstance = { target: null, count: 0, }; /** * 关闭loading */ function closeLoading() { if (LoadingInstance.count > 0) LoadingInstance.count--; if (LoadingInstance.count === 0) uni.hideLoading(); } /** * @description 请求基础配置 可直接使用访问自定义请求 */ const http = new Request(defaultOptions); // 请求拦截器 http.interceptors.request.use( (config) => { // console.log('config ', config, config.withToken) // 在发送请求之前做些什么 // 自定义处理【loading 加载中】:如果需要显示 loading,则显示 loading if (config.custom.showLoading) { LoadingInstance.count++; LoadingInstance.count === 1 && uni.showLoading({ title: config.custom.loadingMsg, mask: true, fail: () => { uni.hideLoading(); }, }); } // 携带token config.header = { ...config.header, Authorization: getAccessToken() ? "Bearer " + getAccessToken() : "", "tenant-id": getTenantId() ? getTenantId() : "1", }; // 只处理GET请求的数组参数 if (config.method.toUpperCase() === "GET" && config.data) { config.url += "?" + qs.stringify(config.data, { arrayFormat: "indices" }); config.data = {}; // 清空params,避免重复传递 } // // get请求映射params参数 // if (config.method === 'get' && config.params) { // let url = config.url + '?'; // for (const propName of Object.keys(config.params)) { // const value = config.params[propName]; // const part = encodeURIComponent(propName) + '=' // if (value !== null && typeof(value) !== "undefined") { // if (typeof value === 'object') { // for (const key of Object.keys(value)) { // let params = propName + '[' + key + ']'; // const subPart = encodeURIComponent(params) + '=' // url += subPart + encodeURIComponent(value[key]) + "&"; // } // } else { // url += part + encodeURIComponent(value) + "&"; // } // } // } // url = url.slice(0, -1); // config.params = {}; // config.url = url; // } // console.log('config--', config, ) return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } ); /** * @description 响应拦截器 */ http.interceptors.response.use( (response) => { // console.log('response-', response) // 约定:如果是 /auth/ 下的 URL 地址,并且返回了 accessToken 说明是登录相关的接口,则自动设置登陆令牌 if ( response.config.url.indexOf("/system/auth/") >= 0 && response.data?.data?.accessToken ) { // console.log('response.data.data.accessToken', response.data.data.accessToken) // setToken(response.data.data.accessToken); setToken(response.data.data); } // 自定处理【loading 加载中】:如果需要显示 loading,则关闭 loading response.config.custom.showLoading && closeLoading(); // 自定义处理【error 错误提示】:如果需要显示错误提示,则显示错误提示 if (response.data.code !== 0) { // 特殊:如果 401 错误码,则跳转到登录页 or 刷新令牌 if (response.data.code === 401) { console.log("401--------"); return refreshTokenFun(response.config); } // 特殊:处理分销用户绑定失败的提示 if ((response.data.code + "").includes("1011007")) { console.error(`分销用户绑定失败,原因:${response.data.msg}`); } else if (response.config.custom.showError) { // 错误提示 uni.showToast({ title: response.data.msg || "服务器开小差啦,请稍后再试~", icon: "none", mask: true, }); } } // 自定义处理【showSuccess 成功提示】:如果需要显示成功提示,则显示成功提示 if ( response.config.custom.showSuccess && response.config.custom.successMsg !== "" && response.data.code === 0 ) { uni.showToast({ title: response.config.custom.successMsg, icon: "none", }); } // 返回结果:包括 code + data + msg // console.log(response.data) localeFormatObj(response.data); return Promise.resolve(response.data); }, (error) => { const userStore = $store("user"); const isLogin = userStore.isLogin; let errorMessage = "网络请求出错"; if (error !== undefined) { switch (error.statusCode) { case 400: errorMessage = "请求错误"; break; case 401: errorMessage = isLogin ? "您的登陆已过期" : "请先登录"; // 正常情况下,后端不会返回 401 错误,所以这里不处理 handleAuthorized break; case 403: errorMessage = "拒绝访问"; break; case 404: errorMessage = "请求出错"; break; case 408: errorMessage = "请求超时"; break; case 429: errorMessage = "请求频繁, 请稍后再访问"; break; case 500: errorMessage = "服务器开小差啦,请稍后再试~"; break; case 501: errorMessage = "服务未实现"; break; case 502: errorMessage = "网络错误"; break; case 503: errorMessage = "服务不可用"; break; case 504: errorMessage = "网络超时"; break; case 505: errorMessage = "HTTP 版本不受支持"; break; } if (error.errMsg) { if (error.errMsg.includes("timeout")) errorMessage = "请求超时"; // #ifdef H5 if (error.errMsg.includes("Network")) errorMessage = window.navigator.onLine ? "服务器异常" : "请检查您的网络连接"; // #endif } else { console.log(error); } } if (error && error.config) { if (error.config.custom.showError) { uni.showToast({ title: error.data?.msg || errorMessage, icon: "none", mask: true, }); } error.config.custom.showLoading && closeLoading(); } return false; } ); // Axios 无感知刷新令牌,参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现 let requestList = []; // 请求队列 let isRefreshToken = false; // 是否正在刷新中 const refreshTokenFun = async (config) => { // 如果当前已经是 refresh-token 的 URL 地址,并且还是 401 错误,说明是刷新令牌失败了,直接返回 Promise.reject(error) if (config.url.indexOf("/auth/refresh-token") >= 0) { return Promise.reject("error"); } // 如果未认证,并且未进行刷新令牌,说明可能是访问令牌过期了 if (!isRefreshToken) { isRefreshToken = true; // 1. 如果获取不到刷新令牌,则只能执行登出操作 // const refreshToken = getRefreshToken(); if (!getRefreshToken()) { return handleAuthorized(); } // 2. 进行刷新访问令牌 try { const refreshTokenResult = await refreshToken(); console.log("refreshTokenResult", refreshTokenResult); if (refreshTokenResult.code !== 0) { // 如果刷新不成功,直接抛出 e 触发 2.2 的逻辑 // noinspection ExceptionCaughtLocallyJS throw new Error("刷新令牌失败"); } // 2.1 刷新成功,则回放队列的请求 + 当前请求 config.header.Authorization = "Bearer " + getAccessToken(); requestList.forEach((cb) => { cb(); }); requestList = []; return request(config); } catch (e) { // 为什么需要 catch 异常呢?刷新失败时,请求因为 Promise.reject 触发异常。 // 2.2 刷新失败,只回放队列的请求 requestList.forEach((cb) => { cb(); }); // 提示是否要登出。即不回放当前请求!不然会形成递归 return handleAuthorized(); } finally { requestList = []; isRefreshToken = false; } } else { // 添加到队列,等待刷新获取到新的令牌 return new Promise((resolve) => { requestList.push(() => { config.header.Authorization = "Bearer " + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改 resolve(request(config)); }); }); } }; /** * 处理 401 未登录的错误 */ const handleAuthorized = () => { const userStore = $store("user"); userStore.LogOut(true); uni.showModal({ title: "提示", content: userStore.isLogin ? "您的登陆已过期" : "请先登录", showCancel: false, confirmText: "确定", success: (res) => { if (res.confirm) { uni.reLaunch({ url: '/pages/user/login' }) } }, }); // 登录超时 return Promise.reject({ code: 401, msg: userStore.isLogin ? "您的登陆已过期" : "请先登录", }); }; export const request = (config) => { return http.middleware(config); }; export const upload = (url, config) => http.upload(url, config); // export default request;