First, establish a database table
1. Ucenter_member user table
-- auto-generated definition create table ucenter_member (id char(19) charset UTf8MB4 not null comment 'member ID' primary Key, Avatar Varchar (255) charset UTf8MB4 NULL comment 'avatar ', Mobile varchar(11) charset utf8MB4 default 'null COMMENT ', rel_name varchar(50) not null comment' iD ', Nickname varchar(50) charset UTf8MB4 not null comment 'nickname ', Password varchar(255) charset utf8MB4 NULL comment 'iD ', department varchar(128) null comment' id ', Grade varchar(10) NULL comment 'grade ', sex tinyint(2) unsigned null comment' gender 1 female, 1 male ', age tinyInt unsigned null comment 'age ', is_deleted Tinyint (1) default 0 not null comment' Logical deletion 1 (true) deleted, 0 (false) not deleted ', is_disabled tinyInt (1) default 0 not null comment 'Whether 1 (true) disabled, 0 (false) not disabled ', gmt_create datetime not null comment 'create time ', gmt_modified datetime not null comment' update time ');Copy the code2. Ucenter_role Role table
-- auto-generated definition create table UCenter_role (id char(19) default 'not null comment' primary key, Role_name varchar(20) default "not NULL comment 'varchar ', ROLE_code varchar(20) NULL comment' varchar ', Remarking varchar(255) NULL comment 'Remarks ', is_deleted TINyInt (1) unsigned default 0 not null comment' Logical deletion 1 (true) deleted, 0 (false) not deleted ', gmt_create datetime not null comment 'create time ', gmt_modified datetime not null comment' update time ');Copy the code3. Ucenter_permission Permission table
-- auto-generated definition create table ucenter_permission ( id char(19) charset utf8mb4 default '' not null comment Primary key, PID char(19) charset UTf8MB4 default 'not NULL comment ', Name varchar(20) charset UTf8MB4 default "not null comment", Type tinyint(3) default 0 not null comment 'type (1: menu,2: button)', Permission_value varchar(50) charset UTf8MB4 NULL comment 'access ', path varchar(100) charset UTf8MB4 null comment' access ', Component varchar(50) charset UTf8MB4 NULL comment ' ', icon varchar(50) charset UTf8MB4 null comment ' ', Status tinyint NULL comment 'Status (0: prohibited,1: normal)', is_deleted Tinyint (1) unsigned default 0 not null comment' Logical deletion 1 (true) deleted, 0 (false) not deleted ', gmt_create datetime NULL comment 'create time ', gmt_modified datetime null comment' update time ');Copy the codeUcenter_member_role Intermediate table of user roles
-- auto-generated definition create table UCenter_member_role (ID char(19) default 'not null comment' primary key ID 'primary Key, role_id char(19) default '0' not NULL comment 'role ID ', user_id char(19) default '0' not null comment' user id', Is_deleted TINyInt (1) unsigned default 0 not null comment 'Delete 1 (true) deleted, 0 (false) not deleted ', gmt_create datetime not null comment 'create time ', gmt_modified datetime not null comment' update time ');Copy the codeUcenter_role_permission Intermediate table of role permissions
-- auto-generated definition create table ucenter_role_permission ( id char(19) default '' not null primary key, role_id char(19) default '' not null, permission_id char(19) default '' not null, Is_deleted TINyInt (1) unsigned default 0 not null comment 'Delete 1 (true) deleted, 0 (false) not deleted ', gmt_create datetime not null comment 'create time ', gmt_modified datetime not null comment' update time ');Copy the code2. Obtain user permissions
List<Permission ()
<? The XML version = "1.0" encoding = "utf-8"? > <! DOCTYPE mapper PUBLIC "- / / mybatis.org//DTD mapper / 3.0 / EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > < mapper namespace="com.sise.wangzhan.ucenter.mapper.PermissionMapper"> <resultMap id="permissionMap" type="com.sise.wangzhan.ucenter.entity.Permission"> <result property="id" column="id"/> <result property="pid" column="pid"/> <result property="name" column="name"/> <result property="type" column="type"/> <result property="permissionValue" column="permission_value"/> <result property="path" column="path"/> <result property="component" column="component"/> <result property="icon" column="icon"/> <result property="status" column="status"/> <result property="isDeleted" column="is_deleted"/> <result property="gmtCreate" column="gmt_create"/> <result property="gmtModified" column="gmt_modified"/> </resultMap> <! < SQL id="columns"> up.id,up.pid,up.name,up.type,up.permission_value,up.path,up.component,up.icon,up.status,up.is_deleted,up.gmt_create,up.g mt_modified </sql> <select id="selectPermissionByUserId" resultMap="permissionMap"> select <include refid="columns" /> from ucenter_member_role umr inner join ucenter_role_permission urp on umr.role_id = urp.role_id inner join ucenter_permission up on urp.permission_id = up.id where umr.user_id = #{userId} and umr.is_deleted = 0 and urp.is_deleted = 0 and up.is_deleted = 0 </select> </mapper>Copy the code2. Modify the entity class
3. Build menu data based on permission data
package com.sise.wangzhan.ucenter.helper; import com.sise.wangzhan.ucenter.entity.Permission; import java.util.ArrayList; import java.util.List; /** * <p> ** @author qy * @since 2019-11-11 */ public class PermissionHelper {/** * use recursive methods to create menus * @param treeNodes * @return */ public static List<Permission> bulid(List<Permission> treeNodes) { List<Permission> trees = new ArrayList<>(); for (Permission treeNode : treeNodes) { if ("0".equals(treeNode.getPid())) { treeNode.setLevel(1); trees.add(findChildren(treeNode,treeNodes)); } } return trees; } public static Permission findChildren(Permission);} public static Permission findChildren(Permission treeNode,List<Permission> treeNodes) { treeNode.setChildren(new ArrayList<Permission>()); for (Permission it : treeNodes) { if(treeNode.getId().equals(it.getPid())) { int level = treeNode.getLevel() + 1; it.setLevel(level); if (treeNode.getChildren() == null) { treeNode.setChildren(new ArrayList<>()); } treeNode.getChildren().add(findChildren(it,treeNodes)); } } return treeNode; }}Copy the code4. Build menus
package com.sise.wangzhan.ucenter.helper; import com.alibaba.fastjson.JSONObject; import com.sise.wangzhan.ucenter.entity.Permission; import org.springframework.boot.configurationprocessor.json.JSONException; import org.springframework.util.StringUtils; import java.util.ArrayList; import java.util.List; /** * <p> ** @author qy * @since 2019-11-11 */ public class MemuHelper {/** ** build menu * @param treeNodes * @return */ public static List<JSONObject> bulid(List<Permission> treeNodes) throws JSONException { List<JSONObject> meuns = new ArrayList<>(); if(treeNodes.size() == 1) { Permission topNode = treeNodes.get(0); // List<Permission> oneMeunList = topNode.getchildren (); for(Permission one :oneMeunList) { JSONObject oneMeun = new JSONObject(); oneMeun.put("path", one.getPath()); oneMeun.put("component", "Layout"); oneMeun.put("redirect", one.getComponent()); oneMeun.put("name", "name_"+one.getId()); oneMeun.put("hidden", false); JSONObject oneMeta = new JSONObject(); oneMeta.put("title", one.getName()); oneMeta.put("icon", one.getIcon()); oneMeun.put("meta", oneMeta); List<JSONObject> children = new ArrayList<>(); List<Permission> twoMeunList = one.getChildren(); for(Permission two :twoMeunList) { JSONObject twoMeun = new JSONObject(); twoMeun.put("path", two.getPath()); twoMeun.put("component", two.getComponent()); twoMeun.put("name", "name_"+two.getId()); twoMeun.put("hidden", false); JSONObject twoMeta = new JSONObject(); twoMeta.put("title", two.getName()); twoMeun.put("meta", twoMeta); children.add(twoMeun); List<Permission> threeMeunList = two.getChildren(); for(Permission three :threeMeunList) { if(StringUtils.isEmpty(three.getPath())) continue; JSONObject threeMeun = new JSONObject(); threeMeun.put("path", three.getPath()); threeMeun.put("component", three.getComponent()); threeMeun.put("name", "name_"+three.getId()); threeMeun.put("hidden", true); JSONObject threeMeta = new JSONObject(); threeMeta.put("title", three.getName()); threeMeun.put("meta", threeMeta); children.add(threeMeun); } } oneMeun.put("children", children); meuns.add(oneMeun); } } return meuns; }}Copy the code5. Build the general menu
{ "redirect": "/ucenter/ucenterList", "path": "/ucenter", "component": "Layout", "hidden": false, "children": [{"path": "/ucenterList", "Component ": "/ucenter/ucenterList", "hidden": false, "meta": {"title":" View user "}, "name": "name_3333" }, { "path": "/ucenterSave", "component": "/ucenter/ucenterSave", "hidden": false, "meta": { "title": "Add user"}, "name" : "name_3333333}]", "meta" : {" icon ":" example ", "title" : "user management"}, "name" : "name_222" }, { "redirect": "/course/courseList", "path": "/course", "component": "Layout", "hidden": false, "children": [{ "path": "/courseList", "component": "/course/courseList", "hidden": false, "meta": { "title": }, "name": "name_555"}, {"path": "/courseSave", "component": "/course/courseSave", "hidden": false, "meta": {"title": "add course"}, "name": "name_666"}, {"path": "/courseUpdate", "Component ": "/course/courseUpdate", "hidden": False, "meta" : {" title ":" modify course} ", "name" : "name_777}]", "meta" : {" icon ":" example ", "title" : "curriculum management"}, "name" : "name_444" }Copy the codeThree, front-end reception
1. Establish corresponding files before receiving
2. Dynamically add routes
2.1. Add to getters.js
2.2. Iterate over the route string from the background and convert it into a component object (added in module under Store)
/* * @Author: your name * @Date: 2021-01-19 11:05:28 * @LastEditTime: 2021-01-19 11:19:51 * @LastEditors: your name * @Description: In User Settings Edit * @FilePath: \vue-admin-template-master\src\store\modules\permission.js */ import { constantRoutes } from '@/router' import { getMenu } from '@/api/login' import Layout from '@/views/layout/Layout' function filterAsyncRouter(asyncRouterMap) { // Traversing the route string from the background, Convert to a component object try {const accessedRouters = asyncroutermap. filter(route => {if (route.componentponent) {if (route.componentponent === = 'Layout') {/ / Layout components special handling ponent = route.com Layout} else {const component ponent route.com ponent = = route.com resolve => { require(['@/views' + component + '.vue'], resolve) } } } if (route.children && route.children.length) { route.children = filterAsyncRouter(route.children) } return true }) return accessedRouters } catch (e) { console.log(e) } } const state = { routes: [], addRoutes: [] } const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) } } const actions = { async GenerateRoutes ({commit}) {// get background route const asyncRouter = await getMenu() return new Promise(resolve => {const TMP = asyncRouter.data.permissionList const accessedRoutes = filterAsyncRouter(tmp) commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) }) } } export default { namespaced: true, state, mutations, actions }Copy the code
