大屏项目初始化
This commit is contained in:
@@ -2,7 +2,6 @@ import axios from 'axios'
|
|||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
|
|
||||||
// 创建axios实例
|
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
baseURL: import.meta.env.PROD ? '' : '/api',
|
baseURL: import.meta.env.PROD ? '' : '/api',
|
||||||
timeout: 10000,
|
timeout: 10000,
|
||||||
@@ -11,62 +10,44 @@ const service = axios.create({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 无需token的白名单接口
|
|
||||||
const WHITE_LIST_PATHS = ['/userLogin', '/register'];
|
const WHITE_LIST_PATHS = ['/userLogin', '/register'];
|
||||||
|
|
||||||
/**
|
const checkTokenExist = (config) => {
|
||||||
* 检查路径是否在白名单中
|
if (WHITE_LIST_PATHS.some(path => config.url?.includes(path))) {
|
||||||
* @param {string} url 请求路径
|
return true;
|
||||||
* @returns {boolean} 是否在白名单
|
|
||||||
*/
|
|
||||||
const isInWhiteList = (url) => {
|
|
||||||
if (!url) return false;
|
|
||||||
return WHITE_LIST_PATHS.some(path => url.includes(path));
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理登录失效/无token逻辑
|
|
||||||
*/
|
|
||||||
const handleLoginExpired = () => {
|
|
||||||
// 清除无效token
|
|
||||||
localStorage.removeItem('token');
|
|
||||||
|
|
||||||
if (router.currentRoute.path !== '/login') {
|
|
||||||
const redirect = encodeURIComponent(router.currentRoute.fullPath);
|
|
||||||
router.push({
|
|
||||||
path: '/login',
|
|
||||||
query: { redirect }
|
|
||||||
}).catch(err => {
|
|
||||||
console.warn('路由跳转登录页失败', err);
|
|
||||||
});
|
|
||||||
ElMessage.error('登录状态已失效,请重新登录');
|
|
||||||
}
|
}
|
||||||
|
// 非白名单接口检查token
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
if (!token) {
|
||||||
|
handleLoginExpired();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 请求拦截器
|
|
||||||
service.interceptors.request.use(
|
service.interceptors.request.use(
|
||||||
(config) => {
|
(config) => {
|
||||||
if (isInWhiteList(config.url)) {
|
if (!checkTokenExist(config)) {
|
||||||
return config;
|
|
||||||
}
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
if (!token) {
|
|
||||||
handleLoginExpired();
|
|
||||||
return Promise.reject(new Error('未检测到登录凭证,请先登录'));
|
return Promise.reject(new Error('未检测到登录凭证,请先登录'));
|
||||||
}
|
}
|
||||||
config.headers.Authorization = `Bearer ${token}`;
|
return config
|
||||||
return config;
|
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
console.error('【请求拦截器错误】', error);
|
console.error('【请求拦截器错误】', error);
|
||||||
return Promise.reject(error);
|
return Promise.reject(error)
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
|
|
||||||
// 响应拦截器
|
|
||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
const res = response.data;
|
const res = response.data;
|
||||||
|
|
||||||
|
if (typeof res === 'string' && res.includes('<html>')) {
|
||||||
|
handleLoginExpired();
|
||||||
|
return Promise.reject(new Error('登录状态已失效,请重新登录'));
|
||||||
|
}
|
||||||
|
|
||||||
if (res.code !== 200) {
|
if (res.code !== 200) {
|
||||||
ElMessage.error(res.msg || '接口请求失败');
|
ElMessage.error(res.msg || '接口请求失败');
|
||||||
if (res.code === 401) {
|
if (res.code === 401) {
|
||||||
@@ -77,6 +58,11 @@ service.interceptors.response.use(
|
|||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
|
if (isLoginExpiredError(error)) {
|
||||||
|
handleLoginExpired();
|
||||||
|
return Promise.reject(new Error('登录状态已失效,请重新登录'));
|
||||||
|
}
|
||||||
|
|
||||||
if (!error.response) {
|
if (!error.response) {
|
||||||
const errMsg = error.message.toLowerCase();
|
const errMsg = error.message.toLowerCase();
|
||||||
if (errMsg.includes('network error') || errMsg.includes('timeout')) {
|
if (errMsg.includes('network error') || errMsg.includes('timeout')) {
|
||||||
@@ -86,16 +72,48 @@ service.interceptors.response.use(
|
|||||||
}
|
}
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error.response.status === 401) {
|
const responseData = error.response.data;
|
||||||
|
if (typeof responseData === 'string' && responseData.includes('<html>')) {
|
||||||
handleLoginExpired();
|
handleLoginExpired();
|
||||||
return Promise.reject(new Error('登录状态已失效,请重新登录'));
|
return Promise.reject(new Error('登录状态已失效,请重新登录'));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 其他错误提示
|
|
||||||
ElMessage.error(error.response.data?.msg || error.message || '接口请求失败');
|
ElMessage.error(error.response.data?.msg || error.message || '接口请求失败');
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
|
|
||||||
|
function isLoginExpiredError(error) {
|
||||||
|
if (error.response && error.response.status === 401) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorMsg = (error.message || '').toLowerCase();
|
||||||
|
const expiredKeywords = [
|
||||||
|
'token expired', 'invalid token', '未授权',
|
||||||
|
'登录失效', '认证失败', '401'
|
||||||
|
];
|
||||||
|
const networkKeywords = ['network error', 'timeout', '网络'];
|
||||||
|
|
||||||
|
return (
|
||||||
|
expiredKeywords.some(keyword => errorMsg.includes(keyword)) &&
|
||||||
|
!networkKeywords.some(keyword => errorMsg.includes(keyword))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleLoginExpired() {
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
if (router.currentRoute.path !== '/login') {
|
||||||
|
const redirect = encodeURIComponent(router.currentRoute.fullPath);
|
||||||
|
router.push({
|
||||||
|
path: '/login',
|
||||||
|
query: { redirect }
|
||||||
|
}).catch(err => {
|
||||||
|
console.warn('路由跳转失败', err);
|
||||||
|
});
|
||||||
|
ElMessage.error('登录状态已失效,请重新登录');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default service;
|
export default service;
|
||||||
@@ -14,7 +14,7 @@ public class LoginInterceptor implements HandlerInterceptor {
|
|||||||
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
|
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
|
||||||
HttpSession session = request.getSession(false);
|
HttpSession session = request.getSession(false);
|
||||||
if (session == null) {
|
if (session == null) {
|
||||||
response.sendRedirect(request.getContextPath() + "/index.html");
|
response.sendRedirect("/login");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
|
|||||||
Reference in New Issue
Block a user