mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
升级Vue3,iView替换ElementPlus
- 删除babel配置、更新依赖与入口初始化 - 全量替换UI组件、样式适配,新增迁移文档与标签/过滤器自动化替换脚本
This commit is contained in:
@@ -1,234 +1,214 @@
|
||||
import axios from 'axios';
|
||||
import https from 'https';
|
||||
import { Message, Spin, Modal } from 'view-design';
|
||||
import Storage from './storage';
|
||||
import router from '../router/index.js';
|
||||
import store from '../vuex/store';
|
||||
import { handleRefreshToken } from '@/api/index';
|
||||
import { v4 as uuidv4} from 'uuid';
|
||||
import axios from "axios";
|
||||
import { ElLoading } from "element-plus";
|
||||
import { Message, Modal } from "@/utils/message";
|
||||
import Storage from "./storage";
|
||||
import { router } from "../router/index.js";
|
||||
import store from "../vuex/store";
|
||||
import { handleRefreshToken } from "@/api/index";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
const qs = require("qs");
|
||||
|
||||
const qs = require('qs');
|
||||
// api地址
|
||||
export const buyerUrl =
|
||||
process.env.NODE_ENV === 'development'
|
||||
process.env.NODE_ENV === "development"
|
||||
? BASE.API_DEV.buyer
|
||||
: BASE.API_PROD.buyer;
|
||||
export const commonUrl =
|
||||
process.env.NODE_ENV === 'development'
|
||||
process.env.NODE_ENV === "development"
|
||||
? BASE.API_DEV.common
|
||||
: BASE.API_PROD.common;
|
||||
export const managerUrl =
|
||||
process.env.NODE_ENV === 'development'
|
||||
process.env.NODE_ENV === "development"
|
||||
? BASE.API_DEV.manager
|
||||
: BASE.API_PROD.manager;
|
||||
export const sellerUrl =
|
||||
process.env.NODE_ENV === 'development'
|
||||
process.env.NODE_ENV === "development"
|
||||
? BASE.API_DEV.seller
|
||||
: BASE.API_PROD.seller;
|
||||
// 创建axios实例
|
||||
var isRefreshToken = 0;
|
||||
|
||||
let isRefreshToken = 0;
|
||||
const refreshToken = getTokenDebounce();
|
||||
|
||||
const service = axios.create({
|
||||
timeout: 10000, // 请求超时时间
|
||||
baseURL: buyerUrl, // API
|
||||
httpsAgent: new https.Agent({
|
||||
rejectUnauthorized: false
|
||||
}),
|
||||
paramsSerializer: params =>
|
||||
timeout: 10000,
|
||||
baseURL: buyerUrl,
|
||||
paramsSerializer: (params) =>
|
||||
qs.stringify(params, {
|
||||
arrayFormat: 'repeat'
|
||||
})
|
||||
arrayFormat: "repeat",
|
||||
}),
|
||||
});
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
(config) => {
|
||||
const { loading } = config;
|
||||
// 如果是put/post请求,用qs.stringify序列化参数
|
||||
const isPutPost = config.method === 'put' || config.method === 'post';
|
||||
const isJson = config.headers['Content-Type'] === 'application/json';
|
||||
const isFile = config.headers['Content-Type'] === 'multipart/form-data';
|
||||
const isPutPost = config.method === "put" || config.method === "post";
|
||||
const isJson = config.headers["Content-Type"] === "application/json";
|
||||
const isFile = config.headers["Content-Type"] === "multipart/form-data";
|
||||
if (isPutPost && isJson) {
|
||||
config.data = JSON.stringify(config.data);
|
||||
}
|
||||
if (isPutPost && !isFile && !isJson) {
|
||||
config.data = qs.stringify(config.data, {
|
||||
arrayFormat: 'repeat'
|
||||
arrayFormat: "repeat",
|
||||
});
|
||||
}
|
||||
/** 配置全屏加载 */
|
||||
if (process.client && loading !== false) {
|
||||
config.loading = Spin.show();
|
||||
|
||||
if (typeof window !== "undefined" && loading !== false) {
|
||||
config.loading = ElLoading.service({ fullscreen: true });
|
||||
}
|
||||
|
||||
let uuid = Storage.getItem('uuid');
|
||||
let uuid = Storage.getItem("uuid");
|
||||
if (!uuid) {
|
||||
uuid = uuidv4();
|
||||
Storage.setItem('uuid', uuid);
|
||||
Storage.setItem("uuid", uuid);
|
||||
}
|
||||
config.headers['uuid'] = uuid;
|
||||
config.headers["uuid"] = uuid;
|
||||
|
||||
// 获取访问Token
|
||||
let accessToken = Storage.getItem('accessToken');
|
||||
const accessToken = Storage.getItem("accessToken");
|
||||
if (accessToken && config.needToken) {
|
||||
config.headers['accessToken'] = accessToken;
|
||||
// 解析当前token时间
|
||||
let jwtData = JSON.parse(
|
||||
decodeURIComponent(escape(window.atob(accessToken.split('.')[1].replace(/-/g, '+').replace(/_/g, '/'))))
|
||||
config.headers["accessToken"] = accessToken;
|
||||
const jwtData = JSON.parse(
|
||||
decodeURIComponent(
|
||||
escape(
|
||||
window
|
||||
.atob(accessToken.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))
|
||||
)
|
||||
)
|
||||
);
|
||||
if (jwtData.exp < Math.round(new Date() / 1000)) {
|
||||
refresh(config)
|
||||
refresh(config);
|
||||
}
|
||||
}
|
||||
|
||||
return config;
|
||||
},
|
||||
error => {
|
||||
Promise.reject(error);
|
||||
}
|
||||
(error) => Promise.reject(error)
|
||||
);
|
||||
|
||||
async function refresh(error) {
|
||||
const getTokenRes = await refreshToken();
|
||||
if (getTokenRes === 'success') {
|
||||
// 刷新token
|
||||
if (getTokenRes === "success") {
|
||||
if (isRefreshToken === 1) {
|
||||
error.response.config.headers.accessToken = Storage.getItem(
|
||||
'accessToken'
|
||||
);
|
||||
error.response.config.headers.accessToken = Storage.getItem("accessToken");
|
||||
return service(error.response.config);
|
||||
} else {
|
||||
router.go(0);
|
||||
}
|
||||
router.go(0);
|
||||
} else {
|
||||
Storage.removeItem('accessToken');
|
||||
Storage.removeItem('refreshToken');
|
||||
Storage.removeItem('userInfo');
|
||||
Storage.setItem('cartNum', 0);
|
||||
store.commit('SET_CARTNUM', 0);
|
||||
Storage.removeItem("accessToken");
|
||||
Storage.removeItem("refreshToken");
|
||||
Storage.removeItem("userInfo");
|
||||
Storage.setItem("cartNum", 0);
|
||||
store.commit("SET_CARTNUM", 0);
|
||||
const currentRoute = router.currentRoute.value;
|
||||
Modal.confirm({
|
||||
title: '请登录',
|
||||
content: '<p>请登录后执行此操作</p>',
|
||||
okText: '立即登录',
|
||||
cancelText: '继续浏览',
|
||||
title: "请登录",
|
||||
content: "请登录后执行此操作",
|
||||
okText: "立即登录",
|
||||
cancelText: "继续浏览",
|
||||
onOk: () => {
|
||||
router.push({
|
||||
path: '/login',
|
||||
path: "/login",
|
||||
query: {
|
||||
rePath: router.history.current.path,
|
||||
query: JSON.stringify(router.history.current.query)
|
||||
}
|
||||
rePath: currentRoute.path,
|
||||
query: JSON.stringify(currentRoute.query),
|
||||
},
|
||||
});
|
||||
},
|
||||
onCancel: () => {
|
||||
// router.go(0)
|
||||
router.push("/");
|
||||
Modal.remove();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// respone拦截器
|
||||
service.interceptors.response.use(
|
||||
async response => {
|
||||
async (response) => {
|
||||
await closeLoading(response);
|
||||
|
||||
return response.data;
|
||||
},
|
||||
async error => {
|
||||
if (process.server) return Promise.reject(error);
|
||||
async (error) => {
|
||||
if (typeof window === "undefined") return Promise.reject(error);
|
||||
await closeLoading(error);
|
||||
const errorResponse = error.response || {};
|
||||
const errorData = errorResponse.data || {};
|
||||
|
||||
if (errorResponse.status === 401 || errorResponse.status === 403 || error.response.data.code === 20004) {
|
||||
if (
|
||||
errorResponse.status === 401 ||
|
||||
errorResponse.status === 403 ||
|
||||
error.response?.data?.code === 20004
|
||||
) {
|
||||
isRefreshToken++;
|
||||
|
||||
if (isRefreshToken === 1) {
|
||||
refresh(error)
|
||||
refresh(error);
|
||||
isRefreshToken = 0;
|
||||
}
|
||||
} else if (errorResponse.status === 404) {
|
||||
// 避免刷新token时也提示报错信息
|
||||
} else {
|
||||
if (error.message) {
|
||||
let _message =
|
||||
error.code === 'ECONNABORTED'
|
||||
? '连接超时,请稍候再试!'
|
||||
: '网络错误,请稍后再试!';
|
||||
Message.error(errorData.message || _message);
|
||||
}
|
||||
// skip
|
||||
} else if (error.message) {
|
||||
const _message =
|
||||
error.code === "ECONNABORTED"
|
||||
? "连接超时,请稍候再试!"
|
||||
: "网络错误,请稍后再试!";
|
||||
Message.error(errorData.message || _message);
|
||||
}
|
||||
return Promise.reject(errorData);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 关闭全局加载
|
||||
* @param target
|
||||
*/
|
||||
const closeLoading = target => {
|
||||
const closeLoading = (target) => {
|
||||
if (!target.config || !target.config.loading) return true;
|
||||
return new Promise((resolve, reject) => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
target.config.loading.hide();
|
||||
target.config.loading.close();
|
||||
resolve();
|
||||
}, 200);
|
||||
});
|
||||
};
|
||||
|
||||
export const Method = {
|
||||
GET: 'get',
|
||||
POST: 'post',
|
||||
PUT: 'put',
|
||||
DELETE: 'delete'
|
||||
GET: "get",
|
||||
POST: "post",
|
||||
PUT: "put",
|
||||
DELETE: "delete",
|
||||
};
|
||||
|
||||
export default function request (options) {
|
||||
export default function request(options) {
|
||||
return service(options);
|
||||
}
|
||||
// 防抖闭包来一波
|
||||
function getTokenDebounce () {
|
||||
|
||||
function getTokenDebounce() {
|
||||
let lock = false;
|
||||
let success = false;
|
||||
return function () {
|
||||
if (!lock) {
|
||||
lock = true;
|
||||
let oldRefreshToken = Storage.getItem('refreshToken');
|
||||
const oldRefreshToken = Storage.getItem("refreshToken");
|
||||
handleRefreshToken(oldRefreshToken)
|
||||
.then(res => {
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
let { accessToken, refreshToken } = res.result;
|
||||
Storage.setItem('accessToken', accessToken);
|
||||
Storage.setItem('refreshToken', refreshToken);
|
||||
|
||||
const { accessToken, refreshToken: newRefreshToken } = res.result;
|
||||
Storage.setItem("accessToken", accessToken);
|
||||
Storage.setItem("refreshToken", newRefreshToken);
|
||||
success = true;
|
||||
lock = false;
|
||||
} else {
|
||||
success = false;
|
||||
lock = false;
|
||||
// router.push('/login')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
.catch(() => {
|
||||
success = false;
|
||||
lock = false;
|
||||
});
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
// 一直看lock,直到请求失败或者成功
|
||||
return new Promise((resolve) => {
|
||||
const timer = setInterval(() => {
|
||||
if (!lock) {
|
||||
clearInterval(timer);
|
||||
if (success) {
|
||||
resolve('success');
|
||||
} else {
|
||||
resolve('fail');
|
||||
}
|
||||
resolve(success ? "success" : "fail");
|
||||
}
|
||||
}, 500); // 轮询时间间隔
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user