vue中axios拦截器,

　　本文主要介绍vue导航卫士和axios拦截器的区别，有助于你更好的理解和使用vue。感兴趣的朋友可以了解一下。

　　在Vue项目中，判断和处理用户登录状态有两种情况，分别是导航卫士和axios拦截器。

一、什么是导航守卫？

　　vue-router提供的导航卫士主要用于通过跳转或取消来守护导航。(路由跳转时触发)

　　我们主要介绍可以验证用户登录状态的全局前置卫士。当一个导航被触发时，全局前卫按创建顺序被调用。它是由守卫异步执行的，导航会一直等待，直到所有守卫都解决了问题。

　　const router=new VueRouter({.})

　　router.beforeEach((收件人，发件人，下一个)={

　　//.

　　})

　　每个保护方法接收三个参数：

　　至：要输入的目的地路由对象

　　出发地：当前导航离开的路线。

　　接下来：函数：一定要调用这个方法来解析这个钩子。执行效果取决于下一个方法的调用参数。

　　Next():继续处理管道中的下一个钩子。如果所有钩子都被执行，导航状态被确认。

　　Next(false):中断当前导航。如果浏览器的URL被更改(由用户手动更改或通过浏览器的后退按钮更改)，URL地址将被重置为对应于from路由的地址。

　　Next(/)或next({ path: /}):跳转到不同的地址。的当前导航被中断，然后执行新的导航。

　　Next(Error): (2.4.0)如果传入Next的参数是错误实例，导航将被终止，错误将被传递给router.onError()注册的回调。

　　注意：一定要调用next方法，否则钩子不会被解析。

　　在请求或响应被then或catch处理之前拦截它们，这可以分为请求拦截器(在发送请求之前触发)和响应拦截器(在接收响应结果之后触发)。(请求接口调用时触发)

　　//添加请求拦截器

　　axios . interceptors . request . use(function(config){

　　//在发送请求之前做一些事情

　　返回配置；

　　}，函数(错误){

　　//对请求错误做些什么

　　return Promise.reject(错误)；

　　});

　　//添加响应拦截器

　　axios . interceptors . response . use(function(response){

　　//对响应数据做些什么

　　返回响应；

　　}，函数(错误){

　　//对响应错误采取措施

　　return Promise.reject(错误)；

　　});

　　注意：必须有返回值。

　　用户登录成功后，我们会将后台返回的用户令牌信息存储在sessionStorage中。

　　路由跳转时使用导航保护。

　　这就是vue导航卫士和axios拦截器区别的细节。更多关于vue导航卫士和axios拦截器的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。