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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
ASP Json Parser修正版
Dec 06 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 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
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
jQuery常见开发技巧详细整理
2013/01/02 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
详解vuex的简单使用
2018/03/12 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python导入时小括号大作用
2017/01/10 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
培训讲师岗位职责
2014/04/13 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
护士岗位竞聘书
2015/09/15 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
MySQL慢查询优化解决问题
2022/03/17 MySQL