首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:39:42
字体:
来源:转载
供稿:网友

前言

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

权限问题解决思路

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

<component :is="currentComponent"/>

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

权限设置中的问题

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

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

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

权限问题解决方法

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

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

图片精选