每个系统都离不开权限控制，这里来说说页面上控制到按钮的思路，仅提供思路：
使用 角色 + 资源(菜单和菜单对应页面上的按钮)+ 授权的方式。
1  定义角色与用户；
假定这里我们只控制到角色这一层次，一个用户一个角色，设计如下：
角色表： role(role_id, role_name)
用户表： user(user_id, username, role_id)，其中role_id是角色表的外键。
2  定义资源
这里假定把菜单、按钮都看成是一种资源，一个菜单上面有多个按钮。
菜单表： menu(menu_id, nemu_name, menu_url)
按钮表： operation(btn_id, btn_code, btn_name, btn_title, menu_id)  btn_title 为提示
按钮表，其中menu_id 区分这个按钮是属于那一个页面，btn_code 存这个按钮在页面上的组件ID，这个在一个页面下应该是唯一的，方便后续页面定位她。比如我的HTML页面A，有一个按钮 
3 录入资源
录入菜单与对应按钮到菜单表和按钮表，数据根据开发的页面而来。
假如我有2个页面
a.html (页面有2个按钮，保存 id: saveBtn，删除 id: deleteBtn )；
b.html (页面有2个按钮，新增 id: addBtn，提交 id: submitBtn )；
那么我录入的数据应该是：
菜单表：
(1，a页面， /a.html)菜单ID假设是1
(2，b页面， /b.html)菜单ID假设是2
按钮表：
(1， saveBtn， 保存， 保存按钮，1)
(2， deleteBtn， 删除， 删除按钮，1)
(3， addBtn， 新增， 新增按钮，2)
(4， submitBtn， 提交， 提交按钮，2)
4 设计授权表
配置角色对资源的访问权限，角色与资源多对多，设计如下：
权限表： author(id, role_id, resource_id, resource_type)    注释： id, 角色ID，资源ID， 资源类型(菜单还是按钮)
5 录入授权数据
录入角色与资源的权限关系，此时某个角色能够访问的资源数据已经有了，包括菜单和按钮。
进入页面控制：
进入页面之前，根据用户拿到角色，根据当前访问的菜单，拿到有权限的按钮；
页面初始化完成后(比如jQuery.ready())，根据按钮ID，有权限的按钮显示，没权限的按钮隐藏(所以之前按钮要保存页面的组件ID)；

首先介绍下思路：
1、用户表 user;
2、角色表 role;
3、菜单 menu;
4、角色菜单权限表 role_menu;
5、用户菜单权限表 user_menu;
如图：

根据用户角色取出该角色所有权限，并对用户进行权限分配；注意菜单的按钮（新增、删除、修改）权限是放在中间表(user_menu)中的；
1、新增用户时，是要根据用户角色进行分配权限的 一定记得批量添加；批量、批量、批量，重要的事情说三遍，不要查询角色权限，然后for循环，这样效率太低了；
SQL如下:
INSERT INTO sys_user_menu(UserId, MenuId, DelPower,    UpdPower,    InsPower,    ViewPower)

SELECT #{userId} UserId, MenuId, 1 DelPower, 1 UpdPower, 1 InsPower, 1 ViewPower FROM sys_role_menu WHERE RoelId = #{roleId}
updPower 默认都是有的 所以都是1，这样根据角色查询出权限直接添加，响应时间大大提升；
2、修改用户角色也要记得重新分配用户权限哦！这个不能忘，可以用上面的方法；
业务方法：

如果角色没有修改，是不用重新分配权限的，所有userRole 重置为 null，如果角色修改则删除原权限，重新进行分配；
3、最后要优化的就是根据用户查询权限的时候啦，我最开始是这样做的，查询角色权限，用户权限，返回到前端，前端进行处理；结果就是很卡 基本上要三到四秒，
解决方案，一步到位；一个查询返回全部数据。
如下SQL:
SELECT menu.MenuId id, ParentId pid, MenuName text,

(SELECT COUNT(1) FROM sys_user_menu WHERE UserId = #{userId} AND  MenuId = sm.MenuId) isShow,

(SELECT CONCAT(

(CASE WHEN smenu.InsPower = 1 THEN 1 ELSE 0 END), ‘,’,

(CASE WHEN smenu.DelPower = 1 THEN 1 ELSE 0 END), ‘,’,

(CASE WHEN smenu.UpdPower = 1 THEN 1 ELSE 0 END), ‘,’,

(CASE WHEN smenu.ViewPower = 1 THEN 1 ELSE 0 END))

FROM sys_user_menu smenu WHERE smenu.UserId = #{userId}

AND  smenu.MenuId = sm.MenuId) MenuInfo

FROM sys_role_menu sm INNER JOIN sys_menu menu on sm.MenuId = menu.MenuId

WHERE RoelId = #{roleId}
首先根据 角色ID查询出权限，然后子查询用户是否有该权限，有返回1 木用返回 0；
最后按钮权限 我是直接拼接成字符串，分别对应 添加、删除、修改、查看 1 有该按钮 0 没有该按钮；
优化后 不管是添加、修改用户，加载用户权限都能控制在 1~2 秒；

再搞权限系统的时候，权限控制到菜单很容易，但是很多情况要控制到按钮接口级别，这个时候设计就要研究下了。方案好几种，这里推荐一个不错的开源方案，大伙可以参考学习下。
Spring Boot-Shiro-Vue实现
github开源地址：
https://github.com/Heeexy/SpringBoot-Shiro-Vue
系统演示地址：
http://g.heeexy.com/
Spring Boot-Shiro-Vue
提供一套基于SpringBoot-shiro-vue的权限管理思路.
前后端都加以控制,做到按钮/接口级别的权限
DEMO
测试地址
admin/123456 管理员身份登录,可以新增用户,角色.
角色可以分配权限
控制菜单是否显示,新增/删除按钮是否显示
设计思路
核心
每个登录用户拥有各自的N条权限,比如 文章:查看/编辑/发布/删除
后端
基于 RBAC新解 .
通常我们的权限设计都是 用户--角色--权限 ,其中角色是我们写代码的人没法控制的,它可以有多条权限,每个用户又可以设计为拥有多个角色.因此如果从角色着手进行权限验证,系统都必须根据用户的配置动起来,非常复杂.
所以我们后台设计的关键点就在于: 后台接口只验证权限,不看角色.
角色的作用其实只是用来管理分配权限的,真正的验证只验证权限 ,而不去管你是否是那种角色.体现在代码上就是接口上注解为
@RequiresPermissions("article:add")
而不是
@RequiresRoles(value = {"admin","manager","writer"}, logical = Logical.OR)
前端
采用了vueAdmin-template , ElementUI , 权限设计思路也是参考了 vueAdmin 的动态路由的设计.
后端负责了接口的安全性,而前端之所以要做权限处理,最主要的目的就是隐藏掉不具有权限的菜单(路由)和按钮.
登录系统后,后端返回此用户的权限信息,比如
"userPermission":{
"menuList":[
"role",
"user",
"article"
],
"roleId":1,
"nickname":"超级用户",
"roleName":"管理员",
"permissionList":[
"article:list",
"article:add",
"user:list",
],
"userId":10003
}
根据menuList判断给此用户生成哪些路由, 根据permissionList判断给用户显示哪些按钮,能请求哪些接口.
数据库
最主要的是要有一张本系统内的全部权限明细表,比如下面这样
如果某用户拥有表格中前五条权限,就可以查出他就拥有article和user两个菜单,至于页面内是否显示(新增)(修改)按钮,就根据他的permissionList来判断.
具体实现
有了思路,就可以根据各自的业务进行实现,本项目在此进行了简单的实现,后端代码在back文件夹,前端代码在vue文件夹.前端启动只需
npm install --registry=https://registry.npm.taobao.org
npm run dev
后端就是常规的shiro配置,前端代码如果看不明白,可以参考前端权限代码说明
分配权限页面效果

权限控制方案
既然是后台权限管理系统，当然少不了权限控制啦，至于权限控制，前端方面当然就是对页面资源的访问和操作控制啦。
前端资源权限主要又分为两个部分，即导航菜单的查看权限和页面增删改操作按钮的操作权限。
我们的设计把页面导航菜单和页面操作按钮统一存储在菜单数据库表中，菜单表中包含以下权限关注点。
菜单类型
菜单类型代码页面资源的类型。类型包括，0：目录   1：菜单   2：按钮'。
权限标识
权限标识即是代表此页面资源，用来进行权限控制的唯一标识，主要是进行增删改查的权限控制。
权限标识包括，sys:user:add：新增 sys:user:edit：编辑 sys:user:delete：删除 sys:user:view：查看。
注：目前查看都可以通过菜单可见性进行控制，所以查看权限标识目前没有用上，如果需要显示无权限页面可以使用。
菜单表结构
具体的菜单表结构如下。
----------------------------------------------------菜单----------------------------------------------------Table structure for `sys_menu`--------------------------------------------------
CREATE TABLE`sys_menu` (
`id`bigint NOT NULL AUTO_INCREMENT COMMENT '编号',
`name`varchar(50) COMMENT '菜单名称',
`parent_id`bigint COMMENT '父菜单ID，一级菜单为0',
`url`varchar(200) COMMENT '菜单URL',
`perms`varchar(500) COMMENT '授权(多个用逗号分隔，如：sys:user:add,sys:user:edit)',
`type`int COMMENT '类型   0：目录   1：菜单   2：按钮',
`icon`varchar(50) COMMENT '菜单图标',
`order_num`int COMMENT '排序',
`create_by`varchar(50) COMMENT '创建人',
`create_time`datetime COMMENT '创建时间',
`last_update_by`varchar(50) COMMENT '更新人',
`last_update_time`datetime COMMENT '更新时间',
`del_flag`tinyint DEFAULT 0 COMMENT '是否删除  -1：已删除  0：正常',PRIMARY KEY(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='菜单管理';
导航菜单实现思路
1.用户登录系统
用户登录系统之后，跳转到首页。
2.根据用户加载导航菜单
在路由导航守卫路由时加载用户导航菜单并存储到store。
加载过程如下，返回结果排除按钮类型。
user -> user_role -> role -> role_menu -> menu。
3.导航栏读取菜单树
导航栏到sotre读取导航树并进行展示。
页面按钮实现思路
1.用户登录系统
用户登录系统之后，跳转到首页。
2.根据用户加载权限标识集合
在路由导航守卫路由时加载用户权限标识集合。
加载过程如下，返回结果是用户权限标识的集合。
user -> user_role -> role -> role_menu -> menu。
3.页面按钮控制
页面操作按钮提供权限标识，查询是否在用户权限标识集合中。
在：有权限，可见或可用，不在：无权限，不可见或禁用。
目前本系统采用的是状态禁用。
权限控制实现
导航菜单权限
加载导航菜单
如下图所示，在导航守卫路由时加载导航菜单并保存状态。
router/index.js
页面组件引用
导航栏页面从共享状态中读取导航菜单树并展示。
views/NavBar/NavBar.vue
views/NavBar/NavBar.vue
页面按钮权限
添加权限获取接口
http/modules/user.js
//查找用户的菜单权限标识集合
export const findPermissions= (params) =>{returnaxios({
url:'/user/findPermissions',
method:'get',
params
})
}
添加权限获取接口
store/modules/user.js
export default{
state: {
perms:[],  //用户权限标识集合
},
getters: {
},
mutations: {
setPerms(state, perms){//用户权限标识集合
state.perms=perms;
}
},
actions: {
}
}
加载权限标识
如下图所示，在导航守卫路由时加载权限标识并保存状态。
router/index.js
权限按钮判断
封装了权限操作按钮组件，在组件中根据外部传入的权限标识进行权限判断。
views/Core/KtButton.vue
:loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">{{label}}
name:'KtButton',
props: {
label: {//按钮显示文本
type: String,default: 'Button'},
size: {//按钮尺寸
type: String,default: 'mini'},
type: {//按钮类型
type: String,default: null},
loading: {//按钮加载标识
type: Boolean,default: false
},
disabled: {//按钮是否禁用
type: Boolean,default: false
},
perms: {//按钮权限标识，外部使用者传入
type: String,default: null}
},
data() {return{
}
},
methods: {
handleClick:function() {//按钮操作处理函数
this.$emit('click', {})
},
hasPerms:function(perms) {//根据权限标识和外部指示状态进行权限判断return hasPermission(perms) &!this.disabled
}
},
mounted() {
}
}
权限判断逻辑
src/permission/index.js
import store from '@/store'
/**
* 判断用户是否拥有操作权限
* 根据传入的权限标识，查看是否存在用户权限标识集合
* @param perms*/exportfunctionhasPermission (perms) {
let hasPermission=false
letpermissions = store.state.user.permsfor(let i=0, len=permissions.length; i
hasPermission=true;break}
}returnhasPermission
}
权限按钮引用
views/Sys/User.vue
测试效果
1.可用状态，操作按钮可用。
2.修改页面的权限标识，导致认证失败。
如下图所示，修改新增和删除按钮的权限标识(加个2)，导致权限认证失败。
3.无权限，操作按钮禁用。
新增和删除按钮因为修改了权限标识，匹配失败，变成了禁用状态。
源码下载