vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码


Posted in Javascript onMay 19, 2020

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

vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

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

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

router.beforeEach((to, from, next) => {
 var asideMenuConfig = sessionStorage.getItem("asideMenuConfig");
 // 验证当前路由所有的匹配中是否需要有登录验证的
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // 这里可以将cookie里是否存有token作为验证是否登录的条件
  // 请根据自身业务需要修改
  // 本段代码根据是否有权限菜单作为是否登录依据
  if (asideMenuConfig) {
   //校验所跳路由是否在配置菜单中
   if (asideMenuConfig.indexOf(to.path) != -1 || to.path == "/index" || to.path == "/login") {
    if(sessionStorage.getItem('redirect')!=null){
     var redirect=sessionStorage.getItem('redirect');
     if(to.path == redirect){//解决next()无限循环
      next()
     }else{
      next({
       path: redirect
      });
     }
    }else{
     next();
    }
   } else {
    next({
     path: from.path
    })
   }
  } else {
   sessionStorage.setItem('redirect', to.fullPath);
   next({
    name: 'login'
   })
  }
 } else {
  next();
 }
})

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

vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

图2asideMenuConfig

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

{
   path: '/RoleManage',
   name: 'RoleManage',
   component: () => import("@/pages/UserManage/roleManage"),
   meta: {
     requiresAuth: true,
     title: '角色管理',
     parent:"用户管理"
   }
},

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

to.matched.some(record =>record.meta.requiresAuth)表示的是只要有一个页面的meta里的requiresAuth为true,即需要权限,则to.matched.some()返回true。

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

vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

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

if(sessionStorage.getItem('redirect')!=null){
  var redirect=sessionStorage.getItem('redirect');
  next({
    path: redirect
  });
}else{
  next();
}

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

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

next()或者next({path:'/'})跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向next传递任意位置对象,且允许设置诸如repace:true、name:'home'之类的选项以及任何用在route-link的to prop或router.push中的选项。

注意:确保要调用next(),否则钩子就不会被 resolved。

总结

到此这篇关于vue利用全局导航守卫作登录后跳转到未登录前指定页面的文章就介绍到这了,更多相关vue利用全局导航守卫作登录后跳转到未登录前指定页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
JS加载解析Markdown文档过程详解
May 19 #Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 #Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
单线程JavaScript实现异步过程详解
May 19 #Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 #Javascript
You might like
十天学会php之第五天
2006/10/09 PHP
PHP技术开发技巧分享
2010/03/23 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
详解Python3定时器任务代码
2019/09/23 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
环境工程大学生自荐信
2013/10/21 职场文书
民事赔偿协议书
2014/11/02 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
小学音乐课教学反思
2016/02/18 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
HTML+JS实现在线朗读器
2022/02/15 Javascript