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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
js实现交通灯效果
Jan 13 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
原生JS实现分页
Apr 19 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
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
yii操作cookie实例简介
2014/07/09 PHP
php去除数组中重复数据
2014/11/18 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
详解webpack babel的配置
2018/01/09 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python中pass语句用法实例分析
2015/04/30 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python BS4库的安装与使用详解
2018/08/08 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
QML实现钟表效果
2020/06/02 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
学生党员思想汇报
2013/12/28 职场文书
租房协议书怎么写
2014/04/10 职场文书
慈善晚会策划方案
2014/05/14 职场文书
导师工作推荐信范文
2014/05/17 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
2016新年感言
2015/08/03 职场文书