开源框架EL-ADMIN开发自己的 web应用（6）-前端权限控制

第（5）节，我们讨论了eladmin后端权限控制的原理，感兴趣的同学可以好好研究一下源代码，将eladmin后端权限控制的代码结构复用到自己的项目，这一节我们来讨论eladmin是如何进行前端权限控制的，其实前端对于权限的控制主要就是控制界面中某些元素的显示与隐藏。首先我们看看 eladmin官网对于前端控制方式的说明，主要涉及到两个：“v-permission"与"checkPermission()”，我们分别进行研究，并举例进行说明。

1. v-permission

还是以"我的岗位管理“界面为例，关于如何用eladmin的代码生成器自动生成"我的岗位管理“界面请参看第（2）节的内容，首先以admin的身份登录，来到”我的岗位管理”界面。如下图

现在我们想实现一种功能，就是以test身份登录时，上图画圈的"删除"按钮消失，也就是说不让test用户有删除的权限，我们来看看前端的源代码，这些删除按钮在哪？

“1”对应的删除按钮在组件中,"2"对应的删除按钮在中,可以看到这两个组件都传入了permission这个对象，我们来看看permission对象是什么？

其实就是代码生成器自动生成的权限标识，仔细回看第（5）节的后端权限控制，其实就相当于下图标红这部分的标识权限。

那么这个permission代表的标识权限传进组件主要有什么作用呢？我们打开，看看里面到底写了一些什么
可以看到传入组件中的permission主要用于v-permission属性的判断，对于v-permission相关源代码的使用，官网并没有给出详细解释，我仔细阅读了源代码，其实这部分操作放在permission.js这个文件中

仔细阅读源代码，大致的内容我已经标得非常清楚了，首先取出内存中登录的用户test,判断该test用户是什么角色，再取出该角色对应的菜单权限，对比标识权限与角色对应的菜单权限，如果有就显示，如果没有就删除相应的组件（其实就是隐藏该组件）。我们再回头来看官网给出的权限控制相关的数据表，其实也是这个思路“用户-角色-菜单”

搞清楚前端控制的原理后，我们如何在eladmin系统中进行控制呢？好了，现在我们来删除之前提到的“我的岗位管理”界面中的两个删除按钮。
首先，以admin身份登录界面，进入角色控制界面，将普通用户对应的“我的岗位管理删除”部分的钩取消。

对于如何给删除按钮设定权限不清楚的同学，请回看第（5）节-后端权限控制。然后退出当前系统，以test身份登录，可以看到，由于没有删除权限，界面上已经没删除按钮了。

我们通过权限设置成功控制了界面上按钮的显示，界面操作很简单，主要是学习eladmin前端对于权限控制的设计。

2. checkPermission()

这个函数参照官方的做法，很简单，就是自定义相关组件的显示，首先看看 eladmin官网的做法

如上图，主要分三步，第一步组件上写明v-if标识；第二步引入checkPermission函数；第三步methods方法标明。现在我们来做个小实例，就是根据是否具有删除权限显示隐藏时间搜索组件

我们参照官网给出的方式，对源代码进行修改

继续引入checkPermission()函数，如下图

刷新页面，可以看到界面中的时间搜索框没有了，如下图

重新以admin身份登录，将普通用户的删除权限恢复，也就是重新打钩，可以看到时间搜索框会重新显示。

3. 总结

第（6）节我们仔细研究了eladmin对于前端控制的方式，其实还是根据“用户-角色-菜单”这个思路，通过对比标识权限与角色权限来进行，关于角色权限界面的生成，其实也可以用eladmin的代码生成器完成，主要是把数据表设计好。我觉得只要把eladmin前端与后端控制的源代码好好研究清楚，以后自己的项目完全可以复用他这一套框架，当然主要针对Spring Security技术，好了，先到这里，后面还会有更重要的内容，请持续关注我。如果能够帮到你，请给我点赞，你们的支持是我更新的动力，谢谢！