Vue+Element+Springboot实现权限控制及三级菜单的动态显示

前言

之前写过一个简单的图书管理项目，用前后端分离的模式来实现的，前端采用vue+element-ui，后端采用springboot。因为那篇文章只是作为效果展示，这里给大家介绍一下前后端分离如何实现权限控制，以及三级菜单的动态渲染。这篇文章包括数据库设计，后端处理，前端处理，这么的一个由低向上的一个过程。整个项目源代码在最后的项目地址链接里边。

---

效果展示

管理员用户

为了直观地让大家感受到效果，先把效果图放出来，如下所示。

普通用户

其实这样的一个骨架搭建出来，后面就是前端处理每个功能组件的开发，后端实现功能接口这样的一个过程了。

实现思路

这个简单系统是基于我之前做的简单图书管理系统来做的，图书管理系统采用前后端分离的模式来实现。因为前端的菜单数据是根据用户的角色动态返回的，所以这里实现的过程总体来说有三个步骤，如下所示。

• 数据库的设计，设计用户表，用户角色表，角色菜单表，菜单表（这里的设计其实是一个解耦的思想，方便后续的维护和扩展）。
• 用户登录时，把角色信息传给后台，后台根据用户角色获取对应菜单数据返回给前端。
• 前端再动态解析为vue-router所需的路由格式，最后再动态渲染为三级菜单。

整体来说，就是这样的一个思路，下面我将介绍一下每个步骤的主要实现代码，完整代码可参照系统地址，有整个系统的前端后端以及数据库sql文件。

数据库处理

用户表的创建

创建用户表的语句如下所示，这里创建了两个用户，admin为管理员的角色（密码为123456），张三为普通用户的角色（密码为123）。

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` char(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `salt` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `enabled` tinyint(1) NULL DEFAULT NULL,
  PRIMARY KEY (`id`, `username`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, 'admin', '1013d5a6d92f8da3d0144e7067c091e9', '8O+vDNr2sI3N82BI31fu1A==', '系统管理员', '111222222', 'admin@163.com', 1);
INSERT INTO `user` VALUES (2, '张三', '97380f5d9a4a4ce2773b101f54245bf7', 'bRQSLsfC2p7fHkR2smU8gg==', '普通用户', '12345678910', 'zhangsan@163.com', 1);

用户角色表的创建

创建用户角色表的sql代码如下所示，这里只设置了两个角色，后面有需要的话，只需要再插入对应的数据就可以。

-- ----------------------------
-- Table structure for admin_user_role
-- ----------------------------
DROP TABLE IF EXISTS `admin_user_role`;
CREATE TABLE `admin_user_role`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `usertype` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `rid` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `fk_operator_role_operator_1`(`usertype`) USING BTREE,
  INDEX `fk_operator_role_role_1`(`rid`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of admin_user_role
-- ----------------------------
INSERT INTO `admin_user_role` VALUES (1, '系统管理员', 1);
INSERT INTO `admin_user_role` VALUES (2, '普通用户', 2);

菜单表的创建

-- ----------------------------
-- Table structure for admin_menu
-- ----------------------------
DROP TABLE IF EXISTS `admin_menu`;
CREATE TABLE `admin_menu`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `path` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `name` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `nameZh` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `iconcls` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `component` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `parentid` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 31 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------