vue怎么实现拦截
Vue 实现拦截的方法
在 Vue 中实现拦截可以通过多种方式，包括路由拦截、HTTP 请求拦截和全局钩子拦截。以下是几种常见的拦截实现方法。
路由拦截
使用 Vue Router 的导航守卫可以在路由跳转前进行拦截处理。例如，可以在全局前置守卫中检查用户权限或登录状态。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
});HTTP 请求拦截
通过 Axios 或其他 HTTP 库的拦截器，可以在请求发出前或响应返回后进行拦截处理。例如，添加请求头或统一处理错误。
axios.interceptors.request.use(
config => {
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) {
router.push('/login');
}
return Promise.reject(error);
}
);全局钩子拦截
Vue 的生命周期钩子或全局混入（mixin）可以用于拦截组件的某些行为。例如，在组件创建前进行权限检查。
Vue.mixin({
beforeCreate() {
if (this.$options.needsAuth && !isAuthenticated()) {
this.$router.push('/login');
}
}
});自定义指令拦截
通过自定义指令可以在 DOM 元素上添加拦截逻辑。例如，限制某些按钮的点击权限。
Vue.directive('permission', {
inserted(el, binding) {
if (!hasPermission(binding.value)) {
el.disabled = true;
el.style.opacity = '0.5';
}
}
});计算属性拦截
使用计算属性可以在数据变化时进行拦截处理。例如，对输入数据进行格式化或验证。
computed: {
filteredData() {
return this.data.filter(item => item.isActive);
}
}以上方法可以根据具体需求选择使用或组合使用，以实现灵活的拦截功能。
