vue权限问题的完美解决方案


Posted in Javascript onMay 08, 2019

前言

最近一直在忙着一个用vue来做的权限管理的项目,其实在此之前,我也研究过vue的权限如何实现,并且也为之写过一篇博客,但当真正应用在项目中的时候,还是发现了许多问题,所以此篇也会就着我在项目中遇到的一些问题,拿出来和大家分享一下,当然示例代码还是我的github仓库中的ant-design-vue-ms (本地下载)。

权限问题解决思路

对于一个前后端分离的项目而言,权限不再是仅仅靠后端来控制,后端只能控制接口的权限,前台的页面显示还是需要我们来控制,针对vue的项目,首先我想的是当权限不多,并且都是单个权限的情况下,我们完全没有必要使用vue中提供的addRoutes的方法,可以使用动态组件来做,即我们根据后端返回的角色,来细度控制动态组件的显示内容,所谓动态组件其实就是vue内置提供的component组件

<component :is="currentComponent"/>

相信看到这里,熟悉的同学应该已经想起来了,这样的话,我们就不需要用到vuex,以及路由配置等等复杂的问题,单纯靠后台返回的角色名称就能解决所有的问题了,看到这里是不是觉得今天的内容就这些了,别着急,下面还有“好看的”。

权限设置中的问题

这样虽然能解决一些简单权限的问题,但是针对稍微复杂一些的权限应用,就显得有些力不从心了,当角色过多,并且还包含了混合角色的权限的话,则会衍生出很多问题,这里也是列举我遇到的一些问题,同学们可以细细推敲一下。

  • 如果是混合角色的话,动态组件的路由跳转实际都是跳转到一个页面,但是混合角色肯定会一个页面中跳到不同角色的页面,这样可能我们要多写很多层的判断,权限混合越多,就越难以去判断。
  • 动态组件扩展性比较差,如果我们再添加一个权限呢,就要再多加一个动态组件的内容,并且出现混合权限的话,那改动的地方就更多了

所以综上所述,最终我还是选择了传统的addRoutes,那么肯定会有同学问了,既然这个方案不行,那干嘛还要用呢。问得好,其实动态组件就是一种尝试,只有知道错了,不满足需求了,我们才能更知道为什么会去使用传统的addRoutes的权限方案。

权限问题解决方法

所以我们来看看addRoutes带来的一些“好处”:

  • 一次配置,多处使用,我们配置好了动态路由以后,不论后期添加多少权限,都能很好的显示路由跳转等等,并且也不需要改动代码,只需要添加新增角色的模块就可以了。
  • 遇到混合角色的问题,如果内容布局类似的话,我们可以使用自定义指令来区分要显示的模块,这样的话如果一个账号同时拥有很多角色的话,那么包含这个角色的模块则会相应的显示出来,就不会出现需要判断究竟显示哪个模块了,也不需要单独为某个角色去设置一个页面来显示了。

相信做过权限的同学对上面的内容还是有一些心得的,然后我们按照该有的步骤一步一步来,这些步骤在上面我的github中已经有了,大家可以对照一下。

1、全局导航守卫的设置,此处设置全局导航守卫,我觉得更多是为了数据持久化,大家都知道,vuex虽然非常好用,但是会有刷新丢失数据的情况,因此针对这种情况,我们使用导航守卫,每次刷新的时候,会重新请求后台的接口来获取角色信息。

if (store.getters.roles.length === 0) {
  store
   .dispatch('GetInfo')
   .then(res => {
   const roles = res.data.resultData && res.data.resultData.roles
   store.dispatch('GenerateRoutes', { roles }).then(() => {
    // 根据roles权限生成可访问的路由表
    // 动态添加可访问路由表
    router.addRoutes(store.getters.addRouters)
   })
   })
   .catch(() => {
   store.dispatch('Logout').then(() => {
    next({ path: '/user/login', query: { redirect: to.fullPath } })
   })
   })
  } else {
  next()
  }

这里代码做了简化,主要给大家看下上面会有一个角色判断长度,主要是当我们不刷新的情况,页面角色信息不回丢失,因此我们也就没有必要去请求后台获取角色信息了,来节省请求数量。

2. 通过上面的代码可以看到,我们首先是请求的角色信息,然后请求了生成路由的GenerateRoutes的方法,方法是写在vuex中的action里面的,这部分的内容因为网上有很多教程,其实主要归纳一下,就是对路由进行递归过滤,过滤出符合角色的路由,然后将静态路由和过滤出来的动态路由链接起来

const permission = {
 state: {
 routers: constRouterMap,
 addRouters: []
 },
 mutations: {
 SET_ROUTERS: (state, routers) => {
  state.addRouters = routers
  state.routers = constRouterMap.concat(routers)
 }
 },
 actions: {
 GenerateRoutes({ commit }, data) {
  //略
 }
 }
}

3、设置我们的路由文件,这部分放到这里来说,主要因为这里还有个小坑,所以也是特地拿出来和大家分享一下

export const constRouterMap = [
 {
  path: '/',
  redirect: '/index',
  component: BasicLayout,
  children: [
   {
    path: '/index',
    name: 'index',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    meta: {
     title: '仪表盘'
    }
   },
   {
    path: '/home',
    name: 'home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
    meta: {
     title: '表单页'
    }
   },
   {
    path: '/pattern',
    name: 'pattern',
    component: () => import(/* webpackChunkName: "pattern" */ '@/views/DesignPattern.vue')
   },
   {
    path: '/map',
    name: 'map',
    component: () => import(/* webpackChunkName: "map" */ '@/views/DataMap.vue'),
    meta: {
     title: '地图组件'
    }
   },
  ]
 },
 {
  path: '/user',
  redirect: '/login',
  component: UserLayout,
  children: [
   {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/user/Login.vue')
   },
   {
    path: '/register',
    name: 'register',
    component: () => import(/* webpackChunkName: "login" */ '@/views/user/Register.vue')
   }
  ]
 },
 //需要注意这里,404的路由一定要写在静态路由中
 {
  path: '/404',
  component: () => import(/* webpackChunkName: "not_found" */ '@/views/NotFound.vue')
 }
]

export const asyncRouterMap = [
 {
  path: '/',
  redirect: '/index',
  component: BasicLayout,
  children: [
   {
    path: '/controls',
    name: 'controls',
    component: () => import(/* webpackChunkName: "controls" */ '@/views/Controls.vue'),
    meta: {
     title: '权限设置',
     permission: ['admin']
    }
   }
  ]
 },
 //捕获未定义的路由配置
 {
  path: '*',
  redirect: '/404',
  hidden: true
 }
]

上面关于404页面的定义顺序非常重要,如果在静态路由中定义了捕获的路由path:"*",而在动态路由中定义了404路由的话,则当导航钩子中判断比较复杂的话,会出现一些意想不到的错误,我就是当时写反了顺序,并且还在导航钩子中做了一些复杂的面包屑的判断,一旦刷新页面的话,则会出现以下错误

vue权限问题的完美解决方案

这种错误的产生,可能是因为刷新时,导航钩子发现动态添加进来的路由找不到一直进行获取动态路由的方法,导致最后调用栈溢出所导致,因此大家在使用的时候一定要非常小心。

4. 当我们生成路由后,退出应用的切换新的角色账号进行登录时,一定要记得的两件事,第一就是清空vuex里面的角色信息,在不刷新的情况下,这些信息是不会丢失的,当不同角色的账号登录时,原来的角色依然存在,那么肯定会出现问题,其次则是在跳转会登录页的时候,需要设置刷新页面的代码

window.location.reload();
this.$router.push({name: 'login'});

先刷新以后再跳转到登录页,这个则是因为addRoutes生成的路由在不刷新的情况下会一直存在,即使下个不同角色的账号登录时,依然会拿之前存在的路由信息去进行过滤,这样过滤的结果必然是当前角色的路由一个都不存在,因此生成的路由信息还是上个角色的路由,所以在完成了之前这些步骤时,一定不要忘记了做这两步,这样也才是一个完整的权限解决方案

尾声

以上也是我在项目中一些收货吧,拿出来和大家分享,也是希望大家少走一些弯路,留心我们开发中遇到的每个看似很小的问题,其实往往是我们最后解决问题的关键,不论是从动态组件还是动态路由,问题的出现也是我们不断去完善自己的过程。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 #Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 #Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 #Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 #Javascript
vue实现菜单切换功能
May 08 #Javascript
浅谈JS的原型和继承
May 08 #Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Django实现发送邮件功能
2019/07/18 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
报关专员求职信范文
2014/02/22 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers