springboot+vue+shiro功能权限

一、数据库表设计

1.权限相关表
CREATE TABLE `t_sys_action` ( `id` varchar(32) NOT NULL COMMENT '主键', `name`
varchar(32) DEFAULT NULL COMMENT '操作名称', `code` varchar(32) DEFAULT NULL
COMMENT '编码', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE
TABLE `t_sys_resource` ( `id` varchar(32) NOT NULL COMMENT '主键', `name`
varchar(64) DEFAULT NULL COMMENT '资源名称', `code` varchar(64) DEFAULT NULL
COMMENT '资源编码', `level` int(11) DEFAULT NULL COMMENT '资源级别', `parent_id`
varchar(32) DEFAULT NULL COMMENT '父级id', `rank` int(11) DEFAULT NULL COMMENT
'排序', `img` varchar(64) DEFAULT NULL COMMENT '资源图片', `url` varchar(126) DEFAULT
NULL COMMENT '路由', `description` varchar(255) DEFAULT NULL COMMENT '描述', `type`
varchar(255) DEFAULT NULL COMMENT '类型', `isleaf` int(1) DEFAULT NULL COMMENT
'是否叶子节点 1 是', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE
TABLE `t_sys_privilege` ( `id` varchar(32) NOT NULL COMMENT '主键', `name`
varchar(64) DEFAULT NULL COMMENT '权限名称', `code` varchar(64) DEFAULT NULL
COMMENT '编码', `resource_id` varchar(32) DEFAULT NULL COMMENT '资源编号',
`action_id` varchar(32) DEFAULT NULL COMMENT '操作编号', PRIMARY KEY (`id`) )
ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `t_sys_role` ( `id`
varchar(32) NOT NULL COMMENT '主键', `name` varchar(32) DEFAULT NULL COMMENT
'角色名称', `code` varchar(32) DEFAULT NULL COMMENT '编码', `rank` varchar(32)
DEFAULT NULL COMMENT '排序', `description` varchar(128) DEFAULT NULL COMMENT
'描述', `enabled` int(1) DEFAULT NULL COMMENT '状态 0 删除 1启用 2禁用', PRIMARY KEY
(`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE
`t_sys_role_privilege` ( `id` varchar(32) NOT NULL COMMENT '主键', `role_id`
varchar(32) DEFAULT NULL COMMENT '角色编号', `privilege_id` varchar(32) DEFAULT
NULL COMMENT '权限编号', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE `t_sys_user` ( `id` varchar(32) NOT NULL COMMENT '主键', `user_name`
varchar(32) DEFAULT NULL COMMENT '姓名', `password` varchar(32) DEFAULT NULL
COMMENT '密码', `nick_name` varchar(64) DEFAULT NULL, `true_name` varchar(64)
DEFAULT NULL COMMENT '真实姓名', `salt` varchar(64) DEFAULT NULL COMMENT '盐',
`gender` int(11) DEFAULT NULL COMMENT '0 保密 1 男 2女', `age` int(11) DEFAULT NULL
COMMENT '年龄', `mobile` varchar(20) DEFAULT NULL COMMENT '电话号码', `email`
varchar(64) DEFAULT NULL COMMENT '邮箱', `country` varchar(32) DEFAULT NULL
COMMENT '国籍', `province` varchar(32) DEFAULT NULL COMMENT '省', `type` int(1)
DEFAULT NULL COMMENT '1，厂家，2机构', `city` varchar(126) DEFAULT NULL COMMENT '城市',
`avatar_url` varchar(256) DEFAULT NULL COMMENT '头像', `language` varchar(64)
DEFAULT NULL, `last_login_ip` varchar(32) DEFAULT NULL, `last_login_time`
varchar(32) DEFAULT NULL, `create_time` varchar(32) DEFAULT NULL, `update_time`
varchar(32) DEFAULT NULL, `create_by` varchar(32) DEFAULT NULL, `update_by`
varchar(32) DEFAULT NULL, `enabled` int(1) DEFAULT NULL COMMENT '状态 0 删除 1启用
2禁用', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=' 用户表';
CREATE TABLE `t_sys_user_role` ( `id` varchar(32) NOT NULL COMMENT '主键',
`user_id` varchar(32) DEFAULT NULL COMMENT '用户编号', `role_id` varchar(32)
DEFAULT NULL COMMENT '角色编号', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT
CHARSET=utf8;

 

其他省略。。。

2. 相关视图
CREATE ALGORITHM = UNDEFINED DEFINER = `root`@`%` SQL SECURITY DEFINER VIEW
`v_privilege` AS SELECT `t_sys_privilege`.`id` AS `id`,
`t_sys_privilege`.`resource_id` AS `resourceid`, `t_sys_privilege`.`action_id`
AS `actionid`, `t_sys_resource`.`code` AS `resourcecode`,
`t_sys_resource`.`name` AS `resourcename`, `t_sys_resource`.`type` AS
`resourcetype`, `t_sys_resource`.`parent_id` AS `parent_id`,
`t_sys_action`.`name` AS `actionname`, concat( `t_sys_resource`.`code`, ':',
`t_sys_action`.`code` ) AS `privilegecode` FROM ( ( `t_sys_resource` LEFT JOIN
`t_sys_privilege` ON ( ( `t_sys_privilege`.`resource_id` =
`t_sys_resource`.`id` ) ) ) LEFT JOIN `t_sys_action` ON ( (
`t_sys_privilege`.`action_id` = `t_sys_action`.`id` ) ) ) CREATE ALGORITHM =
UNDEFINED DEFINER = `root`@`%` SQL SECURITY DEFINER VIEW `v_user_role` AS
SELECT DISTINCT `usr`.`id` AS `id`, `usrr`.`user_id` AS `userid`,
`usrr`.`role_id` AS `roleid`, `usr`.`user_name` AS `username` FROM (
`t_sys_user` `usr` LEFT JOIN `t_sys_user_role` `usrr` ON ( ( `usrr`.`user_id` =
`usr`.`id` ) ) ) WHERE (`usrr`.`role_id` IS NOT NULL) CREATE ALGORITHM =
UNDEFINED DEFINER = `root`@`%` SQL SECURITY DEFINER VIEW `v_user_privilege` AS
SELECT `rl`.`userid` AS `USERID`, `rl`.`username` AS `USERNAME`, `rl`.`roleid`
AS `ROLEID`, `url`.`name` AS `ROLENAME`, `privilge`.`id` AS `PRIVILEGEID`,
`sr`.`id` AS `RESOURCEID`, `sr`.`code` AS `RESOURCECODE`, `sr`.`name` AS
`RESOURCENAME`, `sr`.`type` AS `RESOURCETYPE`, `sr`.`parent_id` AS `PARENTID`,
`sa`.`id` AS `ACTIONID`, `sa`.`code` AS `ACTIONCODE`, `sa`.`name` AS
`ACTIONNAME`, concat( `sr`.`code`, ':', `sa`.`code` ) AS `PRIVILEGECODE` FROM (
( ( ( ( `v_user_role` `rl` LEFT JOIN `t_sys_role` `url` ON ((`rl`.`roleid` =
`url`.`id`)) ) LEFT JOIN `t_sys_role_privilege` `urp` ON ( (`url`.`id` =
`urp`.`role_id`) ) ) LEFT JOIN `t_sys_privilege` `privilge` ON ( (
`urp`.`privilege_id` = `privilge`.`id` ) ) ) LEFT JOIN `t_sys_resource` `sr` ON
( ( `privilge`.`resource_id` = `sr`.`id` ) ) ) LEFT JOIN `t_sys_action` `sa` ON
( ( `privilge`.`action_id` = `sa`.`id` ) ) )
二、菜单栏，根据用户权限查询

1.查询与用户相关的权限资源（最底层的子节点，权限直接挂载在功能点上）
<select id="getResourceByUserName" resultMap="BaseResultMap"> SELECT * FROM
t_sys_resource WHERE id IN ( SELECT DISTINCT RESOURCEID FROM `v_user_privilege`
WHERE USERName = #{userName, jdbcType=VARCHAR} ) </select>
2.根据子节点递归查找所有父节点，组装成树结构

service层：
/** * 根据用户名称获取与权限相关的所有资源（父子级） * * @return */ public
ServiceResult<List<ResourceAO>> getResource(String userName) { //1.查询所有资源
ServiceResult<List<ResourceAO>> listServiceResult = selectByCriteria(null);
List<ResourceAO> allResourceList = null; if (listServiceResult != null &&
listServiceResult.isSucceed() &&
!CollectionUtils.isEmpty(listServiceResult.getData())) { allResourceList =
listServiceResult.getData(); } //超级管理员
if(Constant.SYSTEM_SUPER_ADMIN.equals(userName)){ return
listTreeNodes(allResourceList); } //2.查询用户权限关联的资源 List<ResourceAO>
resourceChildren = getResourceByUserName(userName); //3.根据权限关联的资源（子级）查询所有父级
List<ResourceAO> parentResourceList = new ArrayList<>(); if
(!CollectionUtils.isEmpty(resourceChildren)) { for (ResourceAO child :
resourceChildren) { getParentResourceList(allResourceList, child.getId(),
parentResourceList); } } //查询到的资源组装成树节点 return
listTreeNodes(parentResourceList); } /** * 根据子级查询所有父级资源 * * @param
allResourceList * @param childId * @param parentResourceList * @return */
private List<ResourceAO> getParentResourceList(List<ResourceAO>
allResourceList, String childId, List<ResourceAO> parentResourceList) { if
(!CollectionUtils.isEmpty(allResourceList)) { for (ResourceAO resource :
allResourceList) { // 判断是否存在父节点 if (resource.getId().equals(childId)) { //
递归遍历上一级 getParentResourceList(allResourceList, resource.getParentId(),
parentResourceList); if (!parentResourceList.contains(resource)) {
parentResourceList.add(resource); } } } return parentResourceList; } return
null; } /** * 获取树结构数据 * * @return */ public ServiceResult<List<ResourceAO>>
listTreeNodes(List<ResourceAO> allList) { ServiceResult<List<ResourceAO>> ret =
new ServiceResult<>(); List<ResourceAO> parentList = new ArrayList<>();//根节点
List<ResourceAO> allResourceList = null; if (!CollectionUtils.isEmpty(allList))
{ allResourceList = allList; for (ResourceAO resource : allList) { if
(StringUtils.isEmpty(resource.getParentId())) { parentList.add(resource); } } }
//返回的树形节点数据 List<ResourceAO> treeNodeList = new ArrayList<>(); if
(!CollectionUtils.isEmpty(parentList)) { for (ResourceAO parent : parentList) {
//递归查询所有子节点 treeNodeList.add(recursiveTree(parent, allResourceList)); } }
ret.setData(treeNodeList); ret.setSucceed(true); return ret; } /** *
递归算法解析成树形结构 */ public ResourceAO recursiveTree(ResourceAO parentNode,
List<ResourceAO> allResourceList) { List<ResourceAO> childTreeNodes =
getChildTree(parentNode.getId(), allResourceList); if
(!CollectionUtils.isEmpty(childTreeNodes)) { for (ResourceAO child :
childTreeNodes) { ResourceAO n = recursiveTree(child, allResourceList);
parentNode.getChildren().add(n); } } return parentNode; } /** * 根据父节点ID获取所有子节点
*/ public List<ResourceAO> getChildTree(String parentId, List<ResourceAO>
allResourceList) { List<ResourceAO> childNodes = new ArrayList<>(); if
(!CollectionUtils.isEmpty(allResourceList)) { for (ResourceAO resource :
allResourceList) { if (parentId.equals(resource.getParentId())) {
childNodes.add(resource); } } } return childNodes; }
controller层：
/** * 获取资源. * * @return */ @RequestMapping(value = "/getResource", method =
{RequestMethod.GET, RequestMethod.POST}) @LogOperation(action = "获取资源") public
Object getResource(@RequestParam String userName) { return
resourceService.getResource(userName); }
此时就完成了首页菜单根据权限进行树结构后端接口的组装。 

3.vue前端从后端接口获取菜单树并在页面展示

  （1）MenuTree.vue  菜单树组件
<template> <el-submenu v-if="menu.children && menu.children.length >= 1"
:key="menu.id" :index="menu.name"> <template slot="title"> <i :class="menu.img"
:style="{ marginLeft: asideContainerW }"></i> <span slot="title">{
{menu.name}}</span> </template> <MenuTree v-for="item in menu.children"
:menu="item" :key="item.id"></MenuTree> </el-submenu> <el-menu-item v-else
:index="menu.url" :key="menu.id" @click="handleRoute(menu)"> <i
:class="menu.img" :style="{ marginLeft: asideContainerChildW }"></i> <span
slot="title" style="font-size: 12px">{{menu.name}}</span> </el-menu-item>
</template> <script> export default { name: 'MenuTree', data() { return {
asideContainerW: '2rem', asideContainerChildW: '4rem' } }, props: { menu: {
type: Object, required: true } }, methods: { handleRoute(menu) { //
通过菜单URL跳转至指定路由 this.$router.push(menu.url) } } } </script>
（2）vuex和axios结合查询权限菜单数据： 

（3）取出上面后台查出的菜单数据并展示：

 

三、角色授权

1.资源权限树结构的拼装：

(1) 权限和资源表整合成总的资源
<select id="getResourceWithPrivilege" resultMap="BaseResultMap"> select
id,name,code,parent_id from t_sys_resource UNION all SELECT privilege.id AS id,
action.name AS name, concat(resource.code,':',action.code) AS code, resource.id
as parent_id FROM t_sys_resource resource LEFT JOIN t_sys_privilege privilege
ON privilege.resource_id = resource.id LEFT JOIN t_sys_action action ON
privilege.action_id = action.id where privilege.id is not null </select>
 2. 获取资源权限树

service层：
/** * 获取资源树 * * @return */ public ServiceResult<List<ResourceAO>>
getResourceTreeNode() { //查询所有资源 List<ResourceAO> allResource =
getResourceWithPrivilege(); return listTreeNodes(allResource); } /** *
权限和资源表整合成总的资源 * * @return */ @Override public List<ResourceAO>
getResourceWithPrivilege() { return
resourceCustomizedMapper.getResourceWithPrivilege(); }
这里的listTreeNodes方法上边已经列出过。

controller层：
/** * 获取资源树结构. * * @return */ @RequestMapping(value = "/getResourceTreeNode",
method = {RequestMethod.GET, RequestMethod.POST}) @LogOperation(action =
"获取资源树结构") public Object getResourceTreeNode() { return
resourceService.getResourceTreeNode(); }
3.vue前端：
<template v-if="privilegeShow"> <el-dialog title="角色授权功能菜单"
:visible.sync="privilegeShow" width="40%"> <el-form :model="privilegeForm"
:inline="true" ref="form" class="demo-form-inline" style="margin-bottom:
5px;text-align: center;margin-top: 0px"> <el-form-item label="角色名称：" required
prop="name"> <el-input v-model="privilegeForm.name"
disabled="disabled"></el-input> </el-form-item> <el-form-item label="角色编码：">
<el-input v-model="privilegeForm.code" disabled="disabled"></el-input>
</el-form-item> </el-form> <el-tag size="small">授权功能菜单</el-tag>
<el-divider></el-divider> <template> <el-row> <el-col :span="2" :offset="20">
<div class="grid-content bg-purple-dark"> <el-checkbox v-model="checked"
@change="checkedAll">全选</el-checkbox> </div> </el-col> </el-row> </template>
<ul class="infinite-list" style="height:350px;overflow:auto"> <el-tree
:data="resourceTree" show-checkbox node-key="id" ref="privilegeTree"
default-expand-all :default-checked-keys="rolePrivilegeData"
:props="defaultProps" style="margin-left: 10px;"> </el-tree> </ul> <div
slot="footer" class="dialog-footer"> <el-button size="mini"
@click="privilegeShow = false">取消</el-button> <el-button size="mini"
type="primary" @click="submitPrivilege" :loading="editLoading">确定</el-button>
</div> </el-dialog> </template> computed: { ...mapState('role', [ 'dataSource',
'loading', 'editLoading', 'resourceTree', 'rolePrivilegeData' ]), }

四、权限控制按钮的隐藏和显示

permission.js：
import Vue from 'vue' /**权限指令**/ Vue.directive('has', { inserted: function
(el, binding) { if (!Vue.prototype.$_has(binding.value)) {
el.parentNode.removeChild(el); } } }); //权限检查方法 Vue.prototype.$_has = function
(value) { let isExist = false; let user = localStorage.getItem("user"); if
("admin" == user) { return true; } let premissionsStr =
localStorage.getItem("permissions"); if (premissionsStr == undefined ||
premissionsStr == null) { return false; } if (premissionsStr.indexOf(value) >
-1) { isExist = true; } return isExist; };
 main.js中引入：
import has from './public/permission.js';
页面：
<el-button size="mini" @click="addDialog" type="primary"
v-has="'roleManage:manage'">新增</el-button>
 

• « 上一篇：MySQL之定义变量
• » 下一篇：通讯录管理系统C++类对象实现