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 的方法重载效果
Aug 07 Javascript
innerText 使用示例
Jan 23 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 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地址的代码及注释
2014/01/20 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
python字符串连接方式汇总
2014/08/21 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Python执行时间的几种计算方法
2020/07/31 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
保险公司早会主持词
2014/03/22 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
小学班级管理心得体会
2016/01/07 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL