使用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 相关文章推荐
javascript 贪吃蛇实现代码
Nov 22 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
smarty表格换行实例
2014/12/15 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
js获取内联样式的方法
2015/01/27 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
python中精确输出JSON浮点数的方法
2014/04/18 Python
给Python初学者的一些编程技巧
2015/04/03 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
八大排序算法的Python实现
2021/01/28 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Python常用的json标准库
2019/02/19 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs