vue 导航守卫和axios拦截器有哪些区别

 更新时间:2020年12月19日 16:41:02   作者:刘彤彤  
这篇文章主要介绍了vue 导航守卫和axios拦截器有哪些区别,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下

  在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器。

一、什么是导航守卫?

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

  我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。

const router = new VueRouter({ ... })
 
router.beforeEach((to, from, next) => {
  // ...
})

 每个守卫方法接收三个参数:

to:  即将要进入的目标路由对象

from: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

  注意:一定要确保要调用 next 方法,否则钩子就不会被 resolved。

二、什么是axios拦截器?

  在请求或响应被 then 或 catch 处理前拦截它们,分为请求拦截器(发送请求前触发)和响应拦截器(得到响应结果后触发)。(在请求接口调用时触发)

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  注意:一定要有返回值

三、导航守卫和拦截器的使用

用户登录成功后我们将后台返回的用户token信息存储至sessionStorage中

路由跳转时使用导航守卫

以上就是vue 导航守卫和axios拦截器有哪些区别的详细内容,更多关于vue 导航守卫和axios拦截器的资料请关注脚本之家其它相关文章!

相关文章

  • 详解Vue.js 2.0 如何使用axios

    详解Vue.js 2.0 如何使用axios

    本篇文章主要介绍了Vue.js 2.0 如何使用axios,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 深入浅析Vue.js 中的 v-for 列表渲染指令

    深入浅析Vue.js 中的 v-for 列表渲染指令

    当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for。这篇文章主要介绍了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以参考下
    2018-11-11
  • swiper在vue项目中loop循环轮播失效的解决方法

    swiper在vue项目中loop循环轮播失效的解决方法

    今天小编就为大家分享一篇swiper在vue项目中loop循环轮播失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中$nextTick的用法讲解

    vue中$nextTick的用法讲解

    今天小编就为大家分享一篇关于vue中$nextTick的用法讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue组件中slot的用法

    Vue组件中slot的用法

    这篇文章交详细的给大家介绍了vue组件中slot的用法,主要是让组件的可扩展性更强,具体内容详情大家参考下本文
    2018-01-01
  • 详解vue的数据劫持以及操作数组的坑

    详解vue的数据劫持以及操作数组的坑

    这篇文章主要介绍了vue的数据劫持以及操作数组的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    这篇文章主要介绍了Vue 路由组件传参的 8 种方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • 详解VUE Element-UI多级菜单动态渲染的组件

    详解VUE Element-UI多级菜单动态渲染的组件

    这篇文章主要介绍了VUE Element-UI多级菜单动态渲染的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • antd table按表格里的日期去排序操作

    antd table按表格里的日期去排序操作

    这篇文章主要介绍了antd table按表格里的日期去排序操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现日历表格(element-ui)

    vue实现日历表格(element-ui)

    这篇文章主要为大家详细介绍了vue实现日历表格(element-ui),文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论