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 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
thinkphp分页集成实例
2017/07/24 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python 内置函数filter
2017/06/01 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
会展中心部门工作职责
2013/11/27 职场文书
教育局长自荐信范文
2013/12/22 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
初中生自我评价
2014/02/01 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
本科应届生自荐信
2014/06/29 职场文书
教师职位说明书
2014/07/29 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电