vue路由拦截器和请求拦截器知识点总结

路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('token')){ next(); }else{ alert('请重新登录'); next('/login'); } }) 请求拦截器 当发送请求时才会触发此功能 axios.interceptors.request.use(function (config) { let token = window.localStorage.getItem("token"); i 在Vue.js应用中，路由拦截器（Route Guards）和请求拦截器（Request Interceptors）是两个重要的机制，它们主要用于增强应用程序的安全性和用户体验。下面将详细解释这两个概念，并给出相关的使用示例。 我们来看Vue路由拦截器。路由拦截器是Vue Router提供的一种功能，用于在路由跳转前进行拦截和处理。它主要用在需要控制用户访问权限或执行某些预处理任务的场景。例如，防止未登录用户访问特定页面。在提供的代码中，`router.beforeEach` 是一个全局前置守卫，它会在每次路由改变时触发。这里的逻辑判断是：如果目标路径是'/login' 或者本地存储中有'token'，则允许用户访问；否则，提示用户重新登录并重定向到'/login'页面。 ```javascript router.beforeEach((to, from, next) => { if (to.path === '/login' || localStorage.getItem('token')) { next(); } else { alert('请重新登录'); next('/login'); } }) ``` 在上述代码中，`to` 表示即将进入的目标路由，`from` 表示当前路由，而`next` 是一个函数，用于决定如何继续执行路由跳转。如果`next()`不带参数调用，则继续进行正常的路由跳转；如果传递一个路径，如`next('/login')`，则会跳转到指定路径。 接下来是请求拦截器，它主要用于在发送HTTP请求前和响应后添加额外的操作。在Vue应用中，我们通常使用axios库来处理网络请求。axios提供了`interceptors`属性，可以注册请求和响应拦截器。在提供的代码片段中，我们注册了一个请求拦截器： ```javascript axios.interceptors.request.use(function (config) { let token = window.localStorage.getItem("token"); if (token) { config.headers.token = token; //将token放到请求头发送给服务器 } return config; // 最终需要返回config }, function (error) { return Promise.reject(error); }); ``` 请求拦截器有两个函数，第一个函数在请求被发出之前执行，这里检查本地存储中的`token`，如果存在，就将其添加到请求头中。这样，服务器就能识别请求是否已授权。第二个函数处理错误，如果在请求阶段发生错误，该函数会被调用，并返回一个被拒绝的Promise。 请求拦截器的使用场景很广泛，例如添加通用的请求头、验证用户身份、处理请求超时等。响应拦截器也可以用来处理类似的身份验证失败、错误重试或显示全局错误提示等。 总结一下，Vue路由拦截器和请求拦截器都是提升应用功能和用户体验的重要工具。路由拦截器用于控制页面访问权限，确保用户在合适的状态下访问特定内容；请求拦截器则在数据交换层面添加了额外的处理逻辑，提高了请求的安全性和效率。通过巧妙地使用这些拦截器，开发者可以构建出更健壮、更安全的Vue应用。