vue 的一些拦截

Vue.js 允许你在应用程序中进行路由和HTTP请求的拦截，以便在特定条件下执行操作或处理数据。以下是一些关于拦截的常见用例：

路由拦截：

你可以使用Vue Router来拦截路由导航。这通常用于权限控制，例如，当用户未登录时阻止他们访问某些页面。

const router = new VueRouter({
  routes: [
    {
      path: '/profile',
      component: Profile,
      beforeEnter: (to, from, next) => {
        if (userLoggedIn) {
          next();
        } else {
          next('/login');
        }
      }
    }
  ]
});

HTTP请求拦截：

你可以使用axios或其他HTTP库来拦截请求和响应，以添加通用的处理逻辑，如身份验证标头或错误处理。

axios.interceptors.request.use((config) => {
  // 添加身份验证标头
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
}, (error) => {
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  // 处理响应数据
  return response;
}, (error) => {
  // 处理错误
  return Promise.reject(error);
});

全局前置守卫：

在Vue Router中，你可以使用全局前置守卫来拦截所有路由导航。这可以用于执行一些全局任务，如路由记录、身份验证检查等。

router.beforeEach((to, from, next) => {
  // 在每次路由导航前执行的操作
  if (to.meta.requiresAuth && !userLoggedIn) {
    next('/login');
  } else {
    next();
  }
});

全局解析守卫：

全局解析守卫类似于前置守卫，但是在组件实例创建之前执行，通常用于数据预取或预处理。

router.beforeResolve((to, from, next) => {
  // 在组件实例创建前执行的操作
  fetchData().then(() => {
    next();
  });
});

这些是Vue.js中拦截的常见用例，它们使你可以在应用程序中添加自定义逻辑来控制路由和HTTP请求。你可以根据特定需求来使用这些拦截机制。