vue3后台项目配置路由，拦截器基础框架_vue3路由拦截器

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;