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 相关文章推荐
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
document.write的几点使用心得
May 14 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
webpack入门必知必会
Jan 16 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
Vue数据绑定简析小结
May 07 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
vue实现公共方法抽离
Jul 31 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
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统计字符串中中英文字符的个数
2013/06/23 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python书单 不将就
2017/07/11 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python with语句的原理与用法详解
2020/03/30 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
安全大检查反思材料
2014/01/31 职场文书
文科生自我鉴定
2014/02/15 职场文书
合伙协议书范本
2014/04/21 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python