vue实现拦截器
Vue 拦截器实现方法
在 Vue 中，拦截器通常用于在 HTTP 请求或响应被处理前进行统一操作，例如添加认证信息、错误处理等。以下是几种常见的拦截器实现方式：
使用 Axios 拦截器
Axios 是 Vue 生态中常用的 HTTP 客户端，支持请求和响应拦截器。
安装 Axios：
npm install axios创建拦截器示例：
import axios from 'axios';
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求前添加 token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
// 统一处理错误响应
if (error.response.status === 401) {
// 跳转到登录页
window.location.href = '/login';
}
return Promise.reject(error);
}
);Vue Router 导航守卫
Vue Router 提供了全局前置守卫（beforeEach）和全局后置钩子（afterEach），可用于拦截路由跳转。
import router from './router';
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});Vue 自定义指令拦截
通过自定义指令实现对 DOM 操作的拦截。
Vue.directive('permission', {
inserted: function (el, binding) {
const hasPermission = checkPermission(binding.value);
if (!hasPermission) {
el.parentNode.removeChild(el);
}
}
});组合式 API 拦截
在 Vue 3 中，可以使用组合式 API 实现更灵活的拦截逻辑。
import { onBeforeMount } from 'vue';
export default {
setup() {
onBeforeMount(() => {
const isAuth = localStorage.getItem('token');
if (!isAuth) {
router.push('/login');
}
});
}
};注意事项
- 拦截器应避免阻塞主流程，确保逻辑简洁高效。
- 错误处理需全面，避免未捕获的异常影响用户体验。
- 对于敏感操作，应结合后端验证，前端拦截仅作为辅助手段。
