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中JSON.parse的影响概述
Jul 17 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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通过修改header强制图片下载的方法
2015/03/24 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
python mock测试的示例
2020/10/19 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
班组安全员工作职责
2014/02/01 职场文书
共产党员承诺书
2014/03/25 职场文书
股权收购意向书
2014/04/01 职场文书
教师党员个人整改措施
2014/10/27 职场文书
聘用合同范本
2015/09/21 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书