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 继承详解(一)
Jul 13 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
jquery uaMatch源代码
Feb 14 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 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
COM in PHP (winows only)
2006/10/09 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
php数据访问之查询关键字
2016/05/09 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
使用JS 清空File控件的路径值
2013/07/08 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
jquery实现左右滑动式轮播图
2017/03/02 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python中字符串前面加r的作用
2015/06/04 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Python Json数据文件操作原理解析
2020/05/09 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
财务会计专业自荐书
2014/06/30 职场文书
重阳节活动总结
2014/08/27 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
公司员工体检通知
2015/04/21 职场文书
领导离职感言
2015/08/03 职场文书
Python Django模型详解
2021/10/05 Python
python实现局部图像放大
2021/11/17 Python
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL