使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能


Posted in Javascript onMarch 22, 2018

路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求。对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。

导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。

贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

先来摘抄一段文档中beforeRouteUpdate 的用法:

你可以使用 router.beforeEach 注册一个全局前置守卫:

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

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

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

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

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

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。

下面写一个例子,上一篇博客中我们的账户页,包括课程和订单,都需要在跳转前判断是不是已登录;已登录的情况再去登录页,跳转至首页:

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页,跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

总结

以上所述是小编给大家介绍的使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
微信小程序事件流原理解析
Nov 27 Javascript
收集前端面试题之url、href、src
Mar 22 #Javascript
vue 的keep-alive缓存功能的实现
Mar 22 #Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 #Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 #Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 #Javascript
vuex 的简单使用
Mar 22 #Javascript
Vue.js中的computed工作原理
Mar 22 #Javascript
You might like
一个简洁的多级别论坛
2006/10/09 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python列表操作使用示例分享
2014/02/21 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python异常处理try except过程解析
2020/02/03 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
自我鉴定范文
2013/11/10 职场文书
考试保密承诺书
2014/08/30 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript
微信小程序实现轮播图指示器
2022/06/25 Javascript