vue怎么用全局导航守卫作登录后跳转到未登录前指定页面 - 行业资讯

　　介绍

这篇文章主要讲解了vue怎么用全局导航守卫作登录后跳转到未登录前指定页面,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

有这样一个场景:如果你在登录之前输入了http://localhost: 8080/oauth3-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页面,之后会被定向到登录页面。但是在登录之后,认为你有这个权限了,就需要重新定向到userManage页面。大致流程图如图1所示:

图1登录后跳转到未登录前指定页面流程图

在vue-route的官方文档里其实有给到过这个演示,官方文档链接在此:https://router.vuejs.org/zh/guide/advanced/meta.html。但是不是很符合我们的需求,于是稍加改动,先上代码,搭配流程图可能更容易理解:

路由器。beforeEach(下),从=比;{ 　　var asideMenuConfig=sessionStorage.getItem (“asideMenuConfig");//验证当前路由所有的匹配中是否需要有登录验证的　　如果(to.matched。一些(记录=比;record.meta.requiresAuth)) {//这里可以将饼干里是否存作有标记为验证是否登录的条件//请根据自身业务需要修改//本段代码根据是否有权限菜单作为是否登录依据　　如果(asideMenuConfig) {//校验所跳路由是否在配置菜单中　　如果(asideMenuConfig.indexOf (to.path) !=1 | |。路==?index"| |。路==?login") { 　　如果(sessionStorage.getItem(& # 39;重定向# 39;)!=null) { 　　var=sessionStorage.getItem重定向(& # 39;重定向# 39;); 　　如果()。路径==重定向){//解决next()无限循环　　next () 　　其他}{ 　　下一个({ 　　路径:重定向　　}）; 　　} 　　其他}{ 　　next (); 　　} 　　其他}{ 　　下一个({ 　　路径:from.path 　　}) 　　} 　　其他}{ 　　sessionStorage.setItem(& # 39;重定向# 39;,to.fullPath); 　　下一个({ 　　名称:& # 39;登录# 39; 　　}) 　　} 　　其他}{ 　　next (); 　　} 　　})

系统以是否有权限菜单作为是否登录依据,此处的权限菜单(不同人有不同的权限,所显示的菜单也不一样)由后端送出,处理成自己想要的树结构(例如样例代码中的asideMenuConfig,如图2所示)之后保存下来,此为前提。还有一种就是利用令牌验证作为登录依据,根据自己的业务需要吧,此处不展开。

vue怎么用全局导航守卫作登录后跳转到未登录前指定页面

图2 asideMenuConfig

首先要在route.js定义路由(代码为节选):在路由元信息(元字段)中添加一个对象,里面包含:requiresAuth(是否需要权限)、标题(子菜单名),父母(所属菜单名)

{ 　　路径:& # 39;/RoleManage& # 39; 　　名称:& # 39;RoleManage& # 39; 　　组件:()=比;进口(“@/页面/UserManage/roleManage"), 　　元:{ 　　requiresAuth:没错, 　　标题:& # 39;角色管理& # 39;, 　　父:“用户管理“; 　　} 　　},

然后我们需要遍历rout.matched美元来检查路由记录中的元字段,这些在官方文档中已经写的很清楚了,这里就不细细张开了。这里重点看下一些()方法,一些()测试数组中的某些元素是否通过了指定函数的测试。

to.matched。一些(记录=祝辞record.meta.requiresAuth)表示的是只要有一个页面的元里的requiresAuth为真,即需要权限,则to.matched.some()返回真的。

最后还有一处代码需要注意的是:

vue怎么用全局导航守卫作登录后跳转到未登录前指定页面

有人是不是就想了,获取了登陆前保存的页面路径就可以直接跳转到目标页面了,即写成下列这种形式,但是此举会导致页面一直无限循环调用导航守卫。

如果(sessionStorage.getItem(& # 39;重定向# 39;)!=null) { 　　var=sessionStorage.getItem重定向(& # 39;重定向# 39;); 　　下一个({ 　　路径:重定向　　}）; 　　其他}{ 　　next (); 　　}

原因是一定要调用next()来解决这个导航守卫钩子,但接下来是()有参数和无参数是不一样的,执行效果依赖next()的调用参数。

next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是证实(确认的)。

next()或者下({路径:& # 39;/& # 39;})跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向未来传递任意位置对象,且允许设置诸如repace:真的,名字:& # 39;回家# 39;之类的选项以及任何用在route-link的支持或router.push中的选项。