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


Posted in Vue.js onDecember 19, 2020

在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 导航守卫和axios拦截器有哪些区别的详细内容,更多关于vue 导航守卫和axios拦截器的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
Vue——前端生成二维码的示例
Dec 19 #Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 #Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 #Vue.js
vue 通过base64实现图片下载功能
Dec 19 #Vue.js
Vue中computed和watch有哪些区别
Dec 19 #Vue.js
You might like
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
js 作用域和变量详解
2017/02/16 Javascript
jquery replace方法去空格
2017/05/08 jQuery
react router 4.0以上的路由应用详解
2017/09/21 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
浅谈Python中数据解析
2015/05/05 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
python 实现批量图片识别并翻译
2020/11/02 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
司机岗位职责
2013/11/15 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
换届选举主持词
2015/07/03 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Python经常使用的一些内置函数
2022/04/11 Python