/**
* vue路由拦截器
* 在Vue项目中配置路由拦截器,通常涉及到使用vue-router和axios两个插件,以下是一个基本的配置流程:
* 1.在main.js中引入axios和vue-router
* 2.在scr目录下新建一个router文件夹,在router文件夹中新建request.js文件
*/
// 引入axios,创建axios实例,并设置基础配置
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_API, // 根据环境变量设置 API 地址
timeout: 5000, // 请求超时时间
headers: {
'Cache-Control': 'no-cache',
'Content-Type': 'application/json; charset=utf-8',
}
})
// 请求拦截器,在发送请求之前,可以对请求数据进行处理或添加额外的信息,如 token
service.interceptors.request.use(config => {
// 在这里添加 token 或其他认证信息
config.headers['Authorization'] = localStorage.getItem('token') || '';
return config
}, error => {
// 处理错误请求
console.log('err' + error)
Promise.reject(error)
})
// 响应拦截器,在接收到响应后,可以对响应数据进行处理,或者根据状态码进行特定操作。
service.interceptors.response.use(response => {
// 处理响应数据
const res = response.data;
if (res.code === 200) {
return res.data;
} else {
// 统一处理错误信息
return Promise.reject(new Error(res.message || 'Error'));
}
}, error => {
// 处理错误响应
return Promise.reject(error)
})
// 路由拦截器,在 vue-router 中,可以使用 beforeEach 钩子函数来拦截路由,进行权限验证或其他逻辑处理。
import router from './router';
router.beforeEach((to, from, next) => {
// 检查路由是否需要认证
if (to.matched.some(record => record.meta.requiresAuth)) {
// 这里添加认证逻辑,例如检查 token
if (!localStorage.getItem('token')) {
// 如果认证失败,重定向到登录页面
next({path: '/login'});
} else {
next();
}
} else {
next(); // 确保一定要调用 next()
}
});
vue中配置路由拦截器
于 2024-03-19 15:43:40 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)