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

路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求。对此,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();
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406778.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

统计代码行数

使用终端,cd到项目下 find . "(" -name "*.m" -or -name "*.mm" -or -name "*.cpp" -or -name "*.h" -or -name "*.rss" ")" -print | xargs wc -l 转载于:https://www.cnblogs.com/mo-shou…

基本原理

零序电流保护的基本原理是基于基尔霍夫电流定律:流入电路中任一节点的复电流的代数和等于零,即ΣI0,它是用零序C.T作为取样元件。在线路与电气设备正常的情况下,各相电流的矢量和等于零(对零序电流保护假定不考虑不平衡…

GPS数据格式

本菜鸟人:专业导航,善于寻北,精通惯导,兼职GPS,然近日因课题之需,方究机器之视觉也,乃叹人生之无常兮!惯导今天不讲,讲的话可以说上6天7夜(貌似被拍成电影了&…

C# 的内存拷贝

From: http://www.cnblogs.com/Yjianyong/archive/2010/08/05/1792976.html 近段时间在C#是直接调用动态库比较多,由于有时又需要使用ActiveX控件,往往出现很多的同名的不同命名空间的类,结构等,对不同实体之类的转换是很烦的一件…

也谈如何构建高性能服务端程序

引子:我接触过很多编程语言,接触过各种各样的服务器端开发,Java,Go,Ruby,Javascript等语言,Spring,Node.js,Rails等等常见服务器端框架和编程模型都有接触。这里谈一下我…

Mint-Ui的mt-search点击选中

<template><div class"page-search"><mt-search autofocus v-model"value" placeholder"搜索"> </mt-search><mt-cellv-for"item of filterResult":key"item":title"item"click.nativ…

毕业了!

忆往昔 论文犹如一座大山 日夜码字不知疲倦 写了半天改个没完 良辰美景于我何干 俱往矣 神马检索与期刊 能有几篇是真言 而今迈步从头越 翻过大山尽开颜

网络信息系统(NIS服务器)

分为两部分&#xff1a;一、服务器端配置&#xff1a;1&#xff0e;#检查包是否安装[rootVMLINUX2 shell3]# rpm -qa | grep ypserv ypserv-2.19-32&#xff0e;安装包文件 serv-2.19-3.i386.rpm[rootVMLINUX2 Server]# rpm -ivh ypserv-2.19-3.i386.rpm warning: ypse…

使用C#格式化字符串

From: http://hi.baidu.com/anxing_space/blog/item/6b31186dd6d1d7f942169468.html 今天在博客园上看到一片超赞的C#字符串格式的文章&#xff0c;是我看过最好的一个关于字符格式的文章&#xff0c;转来收藏&#xff0c;顺便向原作者flyingbread表示感谢和尊敬&#xff01; 1…

Tomcat提示Null component

Tomcat提示“严重: Null component Catalina:typeJspMonitor,namejsp,WebModule//localhost/,J2EEApplicationnone,J2EEServernone”错误&#xff0c; 然后无法启动&#xff0c; 这是因为 Tomcat 使用的 jre 版本比应用程序编译的 jre 版本低造成的。 需要把 Tomcat 使用的 jre…

vue如何返回上一页效果

如何通过点击的方式控制当前页返回到上一个路由页面&#xff1a; 1.在当前页面添加返回按钮 <div style"text-align: center"><el-button v-on:click"backHistory">取消</el-button> </div>2.在方法体内写back方法实现点击返回上…

理解 clip

参考 http://developer.51cto.com/art/201009/223326.htm http://vsfor.blog.51cto.com/4165449/1179853 http://www.zhangxinxu.com/wordpress/2011/04/css-cliprect%E7%9F%A9%E5%BD%A2%E5%89%AA%E8%A3%81%E5%8A%9F%E8%83%BD%E5%8F%8A%E4%B8%80%E4%BA%9B%E5%BA%94%E7%94%A8%E4…

机器学习算法基础概念学习总结

转自&#xff1a;http://blog.csdn.net/lantian0802/article/details/38333479 1.基础概念&#xff1a; (1) 10折交叉验证&#xff1a;英文名是10-fold cross-validation&#xff0c;用来测试算法的准确性。是常用的测试方法。将数据集分成10份。轮流将其中的9份作为训练数据&a…

CSS+DIV-设置表格与表单

6-1.html<html><head><title>年度收入</title><style><!--table{caption-side:bottom;}--></style></head><body> <table summary"This table shows the yearly income for years 2004 through 2007" bord…