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面象对象设计
Apr 28 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
angular中的cookie读写方法
Aug 02 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python实现基本线性数据结构
2016/08/22 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
基于python中__add__函数的用法
2019/11/25 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
XML文档面试题
2015/08/05 面试题
运动会通讯稿150字
2014/02/15 职场文书
就业意向书范文
2014/04/01 职场文书
地球一小时倡议书
2014/04/15 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书