前置路由守卫、后置路由守卫，前置请求守卫、后置请求守卫

在Vue 3和Axios中，路由守卫和请求守卫是用于控制路由跳转和HTTP请求的关键机制。

下面是这些守卫的介绍和使用方式：

前置路由守卫（Before Route Guards）

前置路由守卫在路由跳转之前执行，可以用来判断是否允许用户访问某个路由。在Vue 3中，你可以使用router.beforeEach添加全局前置路由守卫。

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({history: createWebHistory(),routes: [// ...],
});
router.beforeEach((to, from, next) => {// to: 即将要进入的目标路由对象// from: 当前导航正要离开的路由// next: 是一个函数，必须调用它来解析这个钩子// 进行权限检查或其他逻辑if (to.meta.requiresAuth && !auth.isLoggedIn()) {next('/login');} else {next();}
});

后置路由守卫（After Route Guards）

后置路由守卫在路由跳转之后执行，通常用于处理一些如数据获取、状态更新等任务。在Vue 3中，你可以使用router.afterEach添加全局后置路由守卫。

router.afterEach((to, from) => {// to: 即将要进入的目标路由对象// from: 当前导航正要离开的路由// 可能用于页面标题更新或其他逻辑document.title = to.meta.title || 'Default Title';
});

前置请求守卫（Before Request Guards）

前置请求守卫在发送HTTP请求之前执行，可以用来修改请求配置或取消请求。在Axios中，你可以使用axios.interceptors.request添加前置请求守卫。

axios.interceptors.request.use(config => {// config: Axios 请求配置对象// 添加认证信息或其他逻辑config.headers.Authorization = `Bearer ${auth.getToken()}`;return config;
}, error => {// 请求错误处理return Promise.reject(error);
});

后置请求守卫（After Request Guards）

后置请求守卫在HTTP请求完成后执行，可以用来处理响应数据或错误。在Axios中，你可以使用axios.interceptors.response添加后置请求守卫。

axios.interceptors.response.use(response => {// response: Axios 响应对象// 对响应数据处理或其他逻辑return response.data;
}, error => {// 响应错误处理if (error.response && error.response.status === 401) {// 可能是认证失败，重定向到登录页面router.push('/login');}return Promise.reject(error);
});