vue如何实现拦截
拦截请求的实现方法
在Vue中拦截请求通常涉及两种场景：拦截HTTP请求（如axios）或拦截路由跳转（如vue-router）。以下是具体实现方式：
拦截HTTP请求（以axios为例）
安装axios后，可以通过拦截器对请求和响应进行全局处理：
import axios from 'axios';
// 请求拦截器
axios.interceptors.request.use(
config => {
// 修改请求配置（如添加token）
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
response => {
// 处理响应数据
if (response.data.code === 401) {
router.push('/login');
}
return response;
},
error => {
// 处理响应错误
return Promise.reject(error);
}
);拦截路由跳转（vue-router）
通过路由守卫实现页面跳转前的权限校验或逻辑处理：
const router = new VueRouter({ ... });
// 全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
});
// 全局后置钩子
router.afterEach((to, from) => {
// 页面跳转后的处理（如埋点统计）
logPageView(to.path);
});组件内拦截
在组件内部可以使用局部守卫拦截路由：
export default {
beforeRouteEnter(to, from, next) {
// 组件渲染前调用
next(vm => {
// 通过vm访问组件实例
});
},
beforeRouteUpdate(to, from, next) {
// 当前路由改变但组件复用时调用
next();
},
beforeRouteLeave(to, from, next) {
// 导航离开组件时调用
if (confirm('确定离开？')) next();
else next(false);
}
}注意事项
- 异步处理：拦截器中涉及异步操作时需返回Promise
- 执行顺序：多个拦截器按添加顺序执行
- 错误处理：务必捕获并处理拦截过程中的异常
- 取消拦截：移除拦截器可通过
axios.interceptors.request.eject(id)实现
以上方法可根据实际需求组合使用，例如同时拦截API请求和路由跳转以实现完整的权限控制系统。
