http拦截器:src/http/index.ts
import axios, { AxiosInstance } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
// 配置新建一个 axios 实例
const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 50000,
headers: { 'Content-Type': 'application/json' },
});
// 添加请求拦截器
service.interceptors.request.use(
(config:any) => {
// 在发送请求之前做些什么 token
if (localStorage.getItem('token')) {
config.headers!['Authorization'] = `${localStorage.getItem('token')}`;
}
return config;
},
(error:any) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
(response:any) => {
// 对响应数据做点什么
const res = response.data;
if (res.code && res.code !== 0) {
// `token` 过期或者账号已在别处登录
if (res.code === 401 || res.code === 4001) {
localStorage.removeItem('token')
sessionStorage.removeItem('routerList')
window.location.href = '/login'; // 去登录页
ElMessageBox.alert('你已被登出,请重新登录', '提示', {})
.then(() => {})
.catch(() => {});
}
return response;
} else {
return response;
}
},
(error:any) => {
// 对响应错误做点什么
if (error.message.indexOf('timeout') != -1) {
ElMessage.error('网络超时');
} else if (error.message == 'Network Error') {
ElMessage.error('网络连接错误');
} else {
if (error.response.data) ElMessage.error(error.response.statusText);
else ElMessage.error('接口路径找不到');
}
return Promise.reject(error);
}
);
// 导出 axios 实例
export default service;
配置路由:src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import {
getRouters
} from "../api/index";
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import('../layout/index.vue'),
children: [
{
path: '/',
component: () => import('../views/index.vue'),
meta:{title: "首页", icon: "", noCache: false, link: null}
}
]
},
{
path: '/login',
name: '/login',
component: () => import('../views/login.vue')
},
// 添加更多路由...
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach(async (to, from, next) => {
// 判断是否存在token
let token = localStorage.getItem('token')
if (!token && to.path == '/login') {
next()
} else {
if (token) {
// 判断是否有路由
let routerList = sessionStorage.getItem('routerList')
if (!routerList) {
let res: any = await getRouters()
routes.forEach((item, index) => {
if (item.children && index == 0) {
// console.log(item,res.data.data)
let children = item.children
res.data.data.forEach((obj: any) => {
obj.meta.img=`../../../assets/svg/${obj.meta.icon}.svg`
children.push(obj)
})
sessionStorage.setItem('routerList', JSON.stringify(item.children))
}
})
}
next()
} else {
next('/login');
}
}
// console.log(routes,"----")
})
export default router;