Vue路由守卫及页面登录权限控制的设置方法(两种)


Posted in Javascript onMarch 31, 2020

①先在我们的登录页面存储一个登录数据

// 登录成功时保存一个登录状态;
sessionStorage.setItem("flag", 1);

② 添加路由守卫

方法一: 直接在路由中添加

const router = new VueRouter({ ... })
 // 路由守卫 
router.beforeEach((to, from, next) => {
 // ...
})

方法二:当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { })方法。

const Recruit = resolve => require(['../components/common/main/index.vue'], resolve);
export default new Router({
 routes: [
 // 登录 
 {
  path: path.login.path,
  name: path.login.path,
  component: Login,
 }, 
 .........

③ 在路由当中添加自定义字段requireAuth,判断当前路由是否需要登录。

下图中1是设置多权限时的设置方法,下图中2是单权限设置方法

Vue路由守卫及页面登录权限控制的设置方法(两种)

④ 在路由守卫中添加我们自己的代码逻辑。

// 路由守卫 
router.beforeEach((to,from,next)=>{
 
 let flag = sessionStorage.getItem('flag ')

 if(to.meta.requireAuth == true){ // 需要登录权限进入的路由
  if(!flag){     // 获取不到登录信息
   next({
    path: '/login'
   })
  }else{      // 获取到登录信息,进行下一步
   return next();
  }
 }else{       // 不需要登录权限的路由直接进行下一步
  return next();
 }
})

总结

到此这篇关于Vue路由守卫及页面登录权限控制的设置方法的文章就介绍到这了,更多相关vue 路由守卫页面登录权限内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
js密码强度实时检测代码
Mar 02 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 #Javascript
js实现整体缩放页面适配移动端
Mar 31 #Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 #Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 #Javascript
功能完善的小程序日历组件的实现
Mar 31 #Javascript
小程序双头slider选择器的实现示例
Mar 31 #Javascript
JavaScript实现电灯开关小案例
Mar 30 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
php截取字符串函数分享
2015/02/02 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
two.js之实现动画效果示例
2017/11/06 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
如何真正的了解python装饰器
2020/08/14 Python
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
争当四好少年演讲稿
2014/09/13 职场文书
四查四看整改措施
2014/09/19 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
家长意见书
2015/06/04 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
教师岗位说明书
2015/09/30 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书