使用RBAC模型构建动态路由权限，交由前端动态渲染路由。

最新推荐文章于 2024-08-27 11:26:51 发布
最新推荐文章于 2024-08-27 11:26:51 发布
阅读量997 收藏 15
点赞数 18
文章标签： 前端 java vue.js spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59331373/article/details/131992411
版权
文章详细介绍了RBAC（Role-BasedAccessControl）模型，包括角色、权限和用户的概念，以及模型的优点。通过一个简单的RBAC数据库设计示例展示了用户、角色和菜单的关联。后端处理动态路由表信息，通过Mapper接口获取用户权限和路由菜单。前端利用这些信息构建动态路由，并在每次跳转时更新路由表。文章还提供了前端如何处理动态路由的代码示例，包括静态和动态路由的结合使用。
摘要由CSDN通过智能技术生成

根据RBAC模型生成动态路由并交给前端渲染

  1. 什么是RBAC模型?
  2. 简单的RBAC模型数据库设计。
  3. 后端处理动态的路由表信息
  4. 前端渲染路由的细节与注意。

什么是RBAC模型

RBAC（Role-Based Access Control）模型是一种访问控制模型，它基于角色的概念来管理和控制系统中的权限和访问权限。它将权限分配给角色，然后将角色分配给用户，从而实现对系统资源的控制和管理。

在RBAC模型中，主要有以下几个要素：

  1. 角色（Role）：角色是一组具有相似职能或权限的用户集合。角色是RBAC模型中的核心概念，用于对用户进行逻辑分组和权限分配。
  2. 权限（Permission）：权限是系统中定义的操作或访问资源的权力。它可以是对数据进行读写操作、执行特定功能或访问特定页面等。
  3. 用户（User）：用户是系统中的实际使用者，每个用户可以被分配一个或多个角色，从而具有相应的权限。
  4. 权限集（Permission Set）：权限集是权限的集合，代表了一个特定角色所拥有的全部权限。
  5. 角色层级（Role Hierarchy）：角色层级是角色之间的层级关系。它用于定义角色之间的继承关系，从而简化权限的管理和授权。

RBAC模型的基本原则是将访问控制与角色关联起来，通过将权限分配给角色，然后将角色分配给用户，可以实现灵活而可扩展的访问控制。

RBAC模型的优点包括：

  • 简化访问控制管理：通过将权限分配给角色，而不是直接分配给用户，可以简化对用户权限的管理和控制。
  • 可扩展性：RBAC模型支持角色层级和角色继承，可以轻松添加、修改和删除角色，从而实现系统的可扩展性。
  • 灵活性：RBAC模型可以根据组织结构和业务需求进行灵活的权限分配和角色管理。

RBAC模型广泛应用于各种系统和应用程序，如企业内部系统、网络服务、操作系统等，以确保对系统资源的安全访问和管理。

RBAC模型示例：
在这里插入图片描述

简单的RBAC模型数据库设计

sys_user表

CREATE TABLE `sys_user`  (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
  `user_name` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT 'NULL' COMMENT '用户名',
  `nick_name` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT 'NULL' COMMENT '昵称',
  `password` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT 'NULL' COMMENT '密码',
  `status` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT '0' COMMENT '账号状态（0正常 1停用）',
  `email` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '邮箱',
  `phone_number` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '手机号',
  `sex` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '用户性别（0男，1女，2未知）',
  `head_url` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '头像',
  `user_type` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '2' COMMENT '用户类型（0:超级管理员，1： 管理员  ， 2：系统用户（普通用户） ）',
  `create_by` bigint NULL DEFAULT NULL COMMENT '创建人的用户id',
  `create_time` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `update_by` bigint NULL DEFAULT NULL COMMENT '更新人',
  `update_time` datetime NULL DEFAULT NULL COMMENT '更新时间',
  `del_flag` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT '0' COMMENT '删除标志（0代表未删除，1代表已删除）',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `username`(`user_name`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of sys_user
-- ----------------------------
INSERT INTO `sys_user` VALUES (1, 'admin', 'youyiadmin', '$2a$10$aFl3deLJQ5alg2IcyEHXwe9to/YXJCu/2KbB/OYG4AAmPr1ghdvKy', '0', '', '12345678912', '0', NULL, '0', NULL, '2023-05-26 10:51:49', NULL, NULL, '0');

sys_role表

CREATE TABLE `sys_role`  (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `role_key` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '角色权限字符串',
  `status` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT '0' COMMENT '角色状态（0正常 1停用）',
  `del_flag` int NULL DEFAULT 0 COMMENT 'del_flag',
  `create_by` bigint NULL DEFAULT NULL,
  `create_time` datetime NULL DEFAULT NULL,
  `update_by` bigint NULL DEFAULT NULL,
  `update_time` datetime NULL DEFAULT NULL,
  `remark` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '备注',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of sys_role
-- ----------------------------
INSERT INTO `sys_role` VALUES (1, '超级管理员', 'admin', '0', 0, 1, '2023-06-01 18:00:59', NULL, NULL, NULL);

sys_user_role中间表

CREATE TABLE `sys_user_role`  (
  `user_id` bigint NOT NULL AUTO_INCREMENT COMMENT '用户id',
  `role_id` bigint NOT NULL DEFAULT 0 COMMENT '角色id',
  PRIMARY KEY (`user_id`, `role_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of sys_user_role
-- ----------------------------
INSERT INTO `sys_user_role` VALUES (1, 1);

sys_menu表

CREATE TABLE `sys_menu`  (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `parent_id` bigint NULL DEFAULT NULL COMMENT '父id',
  `menu_name` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT 'NULL' COMMENT '菜单名',
  `path` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '路由地址',
  `name` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '路由名',
  `component` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '组件路径',
  `visible` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT '0' COMMENT '菜单状态（0显示 1隐藏）',
  `status` char(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT '0' COMMENT '菜单状态（0正常 1停用）',
  `perms` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '权限标识',
  `redirect` varchar(40) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '重定向位置',
  `icon` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT '#' COMMENT '菜单图标',
  `create_by` bigint NULL DEFAULT NULL,
  `create_time` datetime NULL DEFAULT NULL,
  `update_by` bigint NULL DEFAULT NULL,
  `update_time` datetime NULL DEFAULT NULL,
  `del_flag` int NULL DEFAULT 0 COMMENT '是否删除（0未删除 1已删除）',
  `remark` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '备注',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of sys_menu
-- ----------------------------
INSERT INTO `sys_menu` VALUES (1, -1, 'layout路由', '/', 'Layout', '/layout/index.vue', '0', '0', 'sys:admin:list', '/layout/home', '', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (2, -1, '登录', '/login', 'Login', '/views/login/index.vue', '0', '0', 'sys:login', NULL, '', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (3, 1, '主页', '/layout/home', 'Home', '/views/home/index.vue', '1', '0', 'sys:home', '', 'HomeFilled', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (4, -1, '数据大屏', '/screen', 'Screen', '/views/screen/index.vue', '1', '0', 'sys:screen', NULL, 'HomeFilled', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (5, -1, '权限管理', '/acl', 'Acl', '/layout/index.vue', '1', '0', 'sys:acl', '/acl/user', 'Lock', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (6, 5, '用户管理', '/acl/user', 'User', '/views/acl/user/index.vue', '1', '0', 'sys:user', NULL, 'User', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (7, 5, '角色管理 ', '/acl/role', 'Role', '/views/acl/role/index.vue', '1', '0', 'sys:role', NULL, 'Avatar', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (8, 5, '菜单管理', '/acl/permission', 'Permission', '/views/acl/permission/index.vue', '1', '0', 'sys:permission', NULL, 'Operation', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (9, -1, '商品管理 ', '/product', 'Product', '/layout/index.vue', '1', '0', 'sys:product', '/product/trademark', 'Goods', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (10, 9, '品牌管理', '/product/trademark', 'Trademark', '/views/product/trademark/index.vue', '1', '0', 'sys:trademark', NULL, 'ShoppingCart', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (11, 9, '属性管理', '/product/attr', 'Attr', '/views/product/attr/index.vue', '1', '0', 'sys:attr', NULL, 'ChromeFilled', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (12, 9, 'spu管理', '/product/spu', 'Spu', '/views/product/spu/index.vue', '1', '0', 'sys:spu', NULL, 'Calendar', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (13, 9, 'sku管理', '/product/sku', 'Sku', '/views/product/sku/index.vue', '1', '0', 'sys:sku', NULL, 'IceDrink', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (14, -1, '404路由', '/404', '404', '/views/404/index.vue', '0', '0', 'sys:404', NULL, 'Watermelon', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (15, -1, '任意路由', '/:pathMatch(.*)', 'Any', '/views/404/index.vue', '0', '0', 'sys:*', '', 'Watermelon', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (17, -1, 'NULL', NULL, 'NULL', NULL, '0', '0', NULL, NULL, '', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (18, 6, '三级路由测试', 'test', '3Test', 'test', '0', '0', 'test', NULL, '', NULL, NULL, NULL, NULL, 0, NULL);
INSERT INTO `sys_menu` VALUES (19, 18, '四级路由测试', 'test', '4Test', 'test', '0', '0', 'test', NULL, '', NULL, NULL, NULL, NULL, 0, NULL);

sys_role_menu中间表

CREATE TABLE `sys_role_menu`  (
  `role_id` bigint NOT NULL AUTO_INCREMENT COMMENT '角色ID',
  `menu_id` bigint NOT NULL DEFAULT 0 COMMENT '菜单id',
  PRIMARY KEY (`role_id`, `menu_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of sys_role_menu
-- ----------------------------
INSERT INTO `sys_role_menu` VALUES (1, 1);
INSERT INTO `sys_role_menu` VALUES (1, 2);
INSERT INTO `sys_role_menu` VALUES (1, 3);
INSERT INTO `sys_role_menu` VALUES (1, 4);
INSERT INTO `sys_role_menu` VALUES (1, 5);
INSERT INTO `sys_role_menu` VALUES (1, 6);
INSERT INTO `sys_role_menu` VALUES (1, 7);
INSERT INTO `sys_role_menu` VALUES (1, 8);
INSERT INTO `sys_role_menu` VALUES (1, 9);
INSERT INTO `sys_role_menu` VALUES (1, 10);
INSERT INTO `sys_role_menu` VALUES (1, 11);
INSERT INTO `sys_role_menu` VALUES (1, 12);
INSERT INTO `sys_role_menu` VALUES (1, 13);
INSERT INTO `sys_role_menu` VALUES (1, 14);
INSERT INTO `sys_role_menu` VALUES (1, 15);

后端处理动态的路由表信息

创建获取动态路由所用到的实体

User类

/**
 * @author Mr.Liu
 * @version 1.0
 * @date 2023/6/1 17:11
 */

@Data
@ApiModel("用户")
@AllArgsConstructor
@NoArgsConstructor
public class User implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty("主键")
    private Long id;
    @ApiModelProperty("用户名")
    private String userName;
    @ApiModelProperty("昵称")
    private String nickName;
    @ApiModelProperty("密码")
    private String password;
    @ApiModelProperty("账号状态（0正常 1停用）")
    private String status;
    @ApiModelProperty("邮箱")
    private String email;
    @ApiModelProperty("手机号")
    private String phoneNumber;
    @ApiModelProperty("用户性别（0男，1女，2未知）")
    private String sex;
    @ApiModelProperty("头像")
    private String headUrl;
    @ApiModelProperty("用户类型（0:超级管理员，1： 管理员  ， 2：系统用户（普通用户） ")
    private String userType;
    @ApiModelProperty("创建人id")
    private Long createBy;
    @ApiModelProperty("更新人id")
    private Long updateBy;
    @ApiModelProperty("创建时间")
    private LocalDateTime createTime;
    @ApiModelProperty("更新时间")
    private LocalDateTime updateTime;
    @ApiModelProperty("删除标志（0代表未删除，1代表已删除）")
    private String defFlag;



}

Menu类

/**
 * @author Mr.Liu
 * @version 1.0
 * @date 2023/6/3 13:34
 */

@Data
@ApiModel("菜单实体")
public class Menu implements Serializable {
    @ApiModelProperty("主键")
    private  Long id;
    @ApiModelProperty("父菜单id -1代表该路由没有双亲")
    private Long parentId;
    @ApiModelProperty("菜单名")
    private String menuName;
    @ApiModelProperty("路由地址")
    private String path;
    @ApiModelProperty("路由名")
    private String name;
    @ApiModelProperty("组件地址")
    private String component;
    @ApiModelProperty("菜单状态（0显示 1隐藏）")
    private String visible;
    @ApiModelProperty("路由重定向")
    private String redirect;
    @ApiModelProperty("菜单状态（0正常 1停用）")
    private String status;
    @ApiModelProperty("权限标识")
    private String perms;
    @ApiModelProperty("图标")
    private String icon;
    @ApiModelProperty("创建人")
    private Long createBy;
    @ApiModelProperty("更新人")
    private Long updateBy;
    @ApiModelProperty("创建时间")
    private LocalDateTime createTime;
    @ApiModelProperty("更新时间")
    private LocalDateTime updateTime;
    @ApiModelProperty("是否删除（0未删除 1已删除）")
    private String delFlag;
    @ApiModelProperty("描述")
    private String remark;
}

Meta类（分装路由的自定义属性）

/**
 * @author Mr.Liu
 * @version 1.0
 * @date 2023/7/14 20:14
 */

@Data
@NoArgsConstructor
@AllArgsConstructor

@ApiModel("路由的属性")
public class Meta {
    @ApiModelProperty("路由名称")
    private String title;
    @ApiModelProperty("路由是否隐藏")
    private String hidden;
    @ApiModelProperty("路由图标")
    private String icon;
}

MenuDto类(封装好的响应动态路由类)

/**
 * @author Mr.Liu
 * @version 1.0
 * @date 2023/7/14 20:12
 */

@ApiModel(value = "路由表")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class MenuDto {


    @ApiModelProperty("主键")
    private Long id;

    @ApiModelProperty(value = "路由")
    private String path;

    @ApiModelProperty("路由名")
    private String name;

    @ApiModelProperty(value = "名称")
    private String menuName;

    @ApiModelProperty(value = "组件路径")
    private String component;

    @ApiModelProperty(value = "重定向")
    private String redirect;

    @ApiModelProperty("路由属性")
    private Meta meta;

    @ApiModelProperty("子路由")
    private List<MenuDto> children;
}

Mapper操作数据库接口sql

<?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.liu.mapper.MenuMapper">

	<!--根据用户id查询用户权限信息-->
    <select id="findByPermsByUserId" resultType="java.lang.String" parameterType="java.lang.Long">
        SELECT
	    DISTINCT m.`perms`
        FROM
	      sys_user_role ur
	      LEFT JOIN `sys_role` r ON ur.`role_id` = r.`id`
	      LEFT JOIN `sys_role_menu` rm ON ur.`role_id` = rm.`role_id`
	      LEFT JOIN `sys_menu` m ON m.`id` = rm.`menu_id`
        WHERE
	    user_id = #{userId}
	    AND r.`status` = 0
	    AND m.`status` = 0
    </select>

	<!--根据用户id查询对应查询的路由菜单(该路由下没有子路由)-->
	<select id="findMenuParentByUerId" resultType="menu" parameterType="java.lang.Long">
        SELECT
	     m.id, m.path, m.menu_name, m.component ,m.icon , m.name,
         m.visible, m.parent_id ,m.redirect
        FROM
	     sys_user_role ur
	     LEFT JOIN `sys_role` r ON ur.`role_id` = r.`id`
	     LEFT JOIN `sys_role_menu` rm ON ur.`role_id` = rm.`role_id`
	     LEFT JOIN `sys_menu` m ON m.`id` = rm.`menu_id`
        WHERE
	    user_id = #{userId}
	    AND r.`status` = 0
	    AND m.`status` = 0
	    AND m.parent_id = -1
	</select>

	<!--根据指定字段查询路由表信息-->
	<select id="findMenuByColumn" resultType="menu" >
		select  id,  path, menu_name,name, component ,icon ,
         visible, parent_id from sys_menu where ${columnName} = #{param}
	</select>
</mapper>

封装动态路由业务层操作

package com.liu.service.impl;

import com.liu.common.CustomException;
import com.liu.common.R;
import com.liu.entity.*;
import com.liu.mapper.MenuMapper;
import com.liu.service.UserService;
import com.liu.utils.BaseContext;
import com.liu.utils.JwtUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.http.HttpStatus;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

/**
 * @author Mr.Liu
 * @version 1.0
 * @date 2023/6/3 14:09
 */

@Slf4j
@Service("userService")
public class UserServiceImpl implements UserService {

    @Resource
    private MenuMapper menuMapper;

    @Override

    /**
     * 拿到动态路由表
     */
    public R<List<MenuDto>> getMenu() {
        Long userId = BaseContext.getCurrentId();
        if(userId == null){
            new RuntimeException("未知错误!");
        }

        //拿到所有的一级路由
        List<Menu> menuList = menuMapper.findMenuParentByUerId(userId);
        if(menuList.size() == 0  || menuList == null){
            new RuntimeException("未知错误");
        }
        //返回结果集合

        List<MenuDto> menuDtoList =  menuList.stream().map((item) ->{

            MenuDto menuDto = new MenuDto();
            //拿着menu id 去查询与parent_id 相等数据
            List<Menu> menuChildList = menuMapper.findMenuByColumn("parent_id", item.getId());
            if(menuChildList == null || menuChildList.size() == 0){
                Meta meta = new Meta();
                meta.setTitle(item.getMenuName());
                meta.setHidden(item.getVisible());
                meta.setIcon(item.getIcon());
                BeanUtils.copyProperties(item,menuDto);
                menuDto.setName(item.getName());
                menuDto.setMeta(meta);
                return menuDto;
            }else{

                MenuDto menuDto1 = setMenuDto(item);
                return  menuDto1;
            }
        }).collect(Collectors.toList());

        return R.success(menuDtoList,HttpStatus.OK.value());
    }


    //递归设置子路由
    public MenuDto setMenuDto(Menu menu) {
        if (menu == null) return null;
        MenuDto menuDto = new MenuDto();
        List<Menu> childMenuList = menuMapper.findMenuByColumn("parent_id", menu.getId());
        if(childMenuList.size() == 0 || childMenuList == null){
            BeanUtils.copyProperties(menu,menuDto);
            Meta meta = new Meta();
            meta.setIcon(menu.getIcon());
            meta.setTitle(menu.getMenuName());
            meta.setHidden(menu.getVisible());  
            menuDto.setMeta(meta);
            menuDto.setName(menu.getName());
        }else{

            //子路由
            List<MenuDto> listDtoChild = new ArrayList<>();
            //封装子路由集合
            for (Menu menu1 : childMenuList) {
                MenuDto menuDto2 = setMenuDto(menu1);  //递归得到的子路由
                listDtoChild.add(menuDto2);
            }
            BeanUtils.copyProperties(menu,menuDto);
            //设置吗meta属性
            Meta meta = new Meta();
            meta.setIcon(menu.getIcon());
            meta.setTitle(menu.getMenuName());
            meta.setHidden(menu.getVisible());
            menuDto.setMeta(meta);
            menuDto.setName(menu.getName());

            //设置子路由
            menuDto.setChildren(listDtoChild);
        }

        return menuDto;
    }

}

测试接口返回的数据应该长这样

 "data": [
        {
            "id": "1",
            "path": "/",
            "name": "Layout",
            "menuName": "layout路由",
            "component": "/layout/index.vue",
            "redirect": "/layout/home",
            "meta": {
                "title": "layout路由",
                "hidden": "0",
                "icon": ""
            },
            "children": [
                {
                    "id": "3",
                    "path": "/layout/home",
                    "name": "Home",
                    "menuName": "主页",
                    "component": "/views/home/index.vue",
                    "redirect": null,
                    "meta": {
                        "title": "主页",
                        "hidden": "1",
                        "icon": "HomeFilled"
                    },
                    "children": null
                }
            ]
        },
        {
            "id": "2",
            "path": "/login",
            "name": "Login",
            "menuName": "登录",
            "component": "/views/login/index.vue",
            "redirect": null,
            "meta": {
                "title": "登录",
                "hidden": "0",
                "icon": ""
            },
            "children": null
        },
     ···
 ]

前端渲染路由的细节与注意

1.在获取动态路由表前我们也需要几个静态路由

静态路由表

//对外暴露静态路由
export const constantRoutes = [
  {
    //登录路由
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue'),
    meta: {
      title: '登录',
      hidden: true, //代表路由的标题在菜单中是否隐藏 true隐藏 反之不隐藏
      icon: 'User', //菜单图标，支持element_Plus所有图标
    },
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404/index.vue'),
    meta: {
      title: '404',
      hidden: true,
      icon: 'Watermelon',
    },
  },
  {
    path: '/:pathMatch(.*)',
    name: 'Any',
    redirect: '/404',
    meta: {
      title: '任意路由',
      hidden: true,
      icon: 'Watermelon',
    },
  },
]


// console.log("静态路由表",constantRoutes)

2.为了让菜单实时跟新,我让每一次跳转路由之前都会删除之前的路由表，在重新异步获取动态的路由表。

permisstion.ts 文件

//路由鉴权
import router from '.'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import useUserSotre from '@/store/moudules/user'
import setting from '@/setting'
import pinia from '@/store';
import type { Menu, MenuListResponseData, Meta } from '@/api/user/type'
import { reqMenulist } from '@/api/user'


let userStore = useUserSotre(pinia)


//递归转换后端传递的路由格式处理函数
const handlerMenuList = (arr: Menu[]) => {
  let newArr: Menu[] = [];

  //view下的组件实例  
  const compView = import.meta.glob("@/views/**/*.vue");  //只能拿到一级路由的实例
  //layout下的组件实例
  const compLayout = import.meta.glob("@/layout/index.vue")
  arr.forEach((item) => {
    let obj: any = {}
    obj.meta = {}
    obj.path = item.path
    obj.name = item.name
    obj.meta = item.meta
    obj.redirect = item.redirect

    if (item.component) {
      if (item.component.includes('/views')) {
        // console.log("组件实例地址",`/src${item.component}`)
        obj.component = compView[`/src${item.component}`]  //glob必须为string
        // console.log("是否实例化组件成功",obj.component)
      } else if (item.component.includes('/layout')) {
        obj.component = compLayout[`/src${item.component}`];
      }
    } else {
      //组件实例不存在
      obj.component = compView['@/views/404/index.vue'];
    }

    if (item.children) {
      //递归得到子组件实例
      obj.children = handlerMenuList(item.children)
      newArr.push(obj)
    } else {
      newArr.push(obj)
    }

    // console.log(obj)
  });

  if (newArr.length == 0) return []
  return newArr
}

const setAsyncRoutes = async () => {
  //添加动态路由表
  let result: MenuListResponseData = await reqMenulist()
  if (result.code == 200) {
    //TODO 无法实现动态路由
    // console.log("真正的路由表", router.getRoutes());
    // console.log(result);

    //解析后台的路由成为前端真正能用的路由
    const arr = handlerMenuList(result.data);
    // console.log("解析好的路由数组",arr)
    //把解析的好的动态路由放到userStore中
    userStore.menuRoutes = arr;
    //清空之前路由器残留路由
    router.getRoutes().forEach((route: any) => {
      router.removeRoute(route.name)
    })
    //循环添加动态路由到主路由器中
    arr.forEach((item: any) => {
      //添加解析好的路由对象
      // console.log(item)
      router.addRoute(item)
    })

    // console.log("动态获取并添加成功的路由表", router.getRoutes());

  }
}

//全局前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {
  nprogress.start()
  //是否有token 有代表已经登录 没有代表未登录
  let token = userStore.token

  setAsyncRoutes(); //获取动态路由并放入到路由器中
  //获取用户信息
  let username = userStore.username
  console.log(token)
  if (token) {
    if (to.path == '/login') {
      next({ path: '/' })
    } else {
      //登录成功访问非登录页面直接放行
      //还得有用户信息才会放行
      if (username) {
        next()
      } else {
        //没有用户信息发请求获取用户信息再放行
        try {
          // await userStore.userInfo()
          // //获取用户信息以后我再进行放行
          next()
        } catch (e: any) {
          //token过期导致发请求出异常
          //退出登录清空服务器数据并跳转到登录页面
          // await userStore.userLogout()
          next({ path: '/login', query: { redirect: to.path } })
        }
      }
    }
  } else {
    if (to.path == '/login') {
      next()
    } else {
      next({
        path: '/login',
        query: {
          redirect: to.path,
        },
      })
    }
  }
})



//全局后置守卫
router.afterEach(async (to: any, from: any) => {
  nprogress.done()
  document.title = setting.title + '-' + to.meta.title
})

该demo使用vite +vue3 +ts 构成 ，在vite中可以使用import.meta.glob(“xxx”)的形式拿到组件实例对象集合，可以以组件地址（key）的形式拿到组件实例对象（value）以此来构建动态路由表

运行效果展示

在这里插入图片描述

游弋着的时间
关注
FastAPI+Vue3，RBAC权限管理，实现 菜单、路由、按钮、接口 权限控制；笔记ht-mini-rbac.zip
11-06
5. 前端渲染：Vue3根据接收到的用户角色信息，动态生成UI，隐藏无权限的菜单、按钮和路由。 6. 路由守卫：Vue3可以设置路由守卫，确保只有具备特定权限的用户才能跳转到特定页面。 总的来说，通过FastAPI和Vue3结合...
Rbac动态权限控制
weixin_43494537的博客
07-27 1113
文章目录Rbac动态权限控制 Rbac动态权限控制 1、RBAC（基于角色的权限控制）模型的核心是在用户和权限之间引入了角色的概念。取消了用户和权限的直接关联，改为通过用户关联角色、角色关联权限的方法来间接地赋予用户权限（如下图），从而达到用户和权限解耦的目的。 2、Maven依赖 <!-- springboot 整合mybatis框架 --> <dependency> <groupId>org.mybatis.spring.boot</groupId&
在 Vue 中，如何实现 RBAC（权限系统）?
qq_41994396的博客
05-09 1614
权限管理”一般在大家的印象中都属于后端的责任，但这两年随着 SPA 应用的兴起，很多应用都采用了前后端分离的方式进行开发，但是纯前端的开发方式就导致，以前很多由后端模板语言硬件解决的问题，现在势必要重新造一次轮子。而如果要重造轮子，前端er 就要根据对应的公司业务需求和后端er 一起配合，基于需求和安全性来考虑，来实现这个动态路由了。所以考虑到以上的痛点和具体的业务需求。今天我会模拟前端请求后端，获取用户权限，实现RBAC，带你从登录到验证、鉴权，最终实现动态 RBACRABC 的功能。
RBAC权限控制模型
最新发布
hello.reader
08-27 2123
根据系统需求，首先需要定义系统中的所有角色。例如，在一个内容管理系统中，可以定义“编辑”、“审核员”和“管理员”三个角色。
浅谈 RBAC 权限模型
小王的技术库
02-13 1264
前面主要给大家介绍了RBACRBAC0：最基础的模型，后面所有模型都会基于这个去演进。它的特点是非常简单且流程简单，但是对于复杂的业务比较难以进行细粒度的控制。RBAC1：基于RBAC0，引入角色继承概念，即角色存在了上下级关系，高等级向下兼容低等级角色拥有的权限，最常见的比如部门负责人 - 部门经理 - 组长 - 组员之间的关系。RBAC2：在RBAC1基础上给角色增加了一定的限制，比如角色互斥性、角色唯一性、角色先决条件等特征，更加细粒度地去控制角色权限。RBAC3：最全的权限模型，企业级模型。
前端中的RBAC权限设计思想
m0_57712926的博客
08-30 894
目录前言一、什么是RBAC？二、RBAC的应用1. 用户分配角色2. 角色分配权限总结 前言 做后台管理系统，肯定会牵扯到用户权限的问题。为的是做到不同的用户进入管理系统看到的页面不同，并且根据用户权限来提供相对应的功能。那么怎么在项目中实现呢？一起来看看吧~ 一、什么是RBAC？ 为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。 二、RBAC的应用 先
RBAC权限详解
xm1037782843的博客
07-30 9071
RBAC权限详解
一个使用 vue3+ antv 构建的 rbac 权限模型-e-admin-vue-ts.zip
01-30
Vue3 + AntV 构建的 RBAC 权限模型是一个现代前端开发中的常见实践，尤其在企业级应用中广泛采用。在这个项目中，开发者利用 Vue3 的新特性与 AntV 数据可视化库来创建了一个基于角色的访问控制（Role-Based Access ...
Laravel框架实现的rbac权限管理操作示例
10-17
Laravel框架实现的rbac（Role-Based Access Control，基于角色的访问控制）权限管理是web开发中常见的一种用户权限管理方式，它通过角色关联用户和权限，实现了对用户访问权限的灵活控制。Laravel作为PHP领域内广泛...
thinkPHP编写RBAC权限
12-06
在ThinkPHP 3.2中，这通常涉及到数据库设计、模型构建、控制器编写、视图渲染以及权限检查等多方面的技术。希望这个介绍能对你理解和应用RBAC有所帮助。如果你想要进一步深入学习，可以参考提供的"RBAC"压缩包文件，...
基于Vue+Egg.js的JS全栈项目。动态菜单，RBAC权限模型，Websocket实-egg-beehive.zip
11-06
这个项目“基于Vue+Egg.js的JS全栈项目”旨在实现一个具备动态菜单、RBAC（Role-Based Access Control）权限模型以及WebSocket实时通信功能的系统。以下是关于这些技术点的详细解释： 1. **Vue.js**：Vue.js 是一个...
Yii2 rbac权限控制之菜单menu实例教程
10-22
而RBAC（基于角色的访问控制）是一种广泛使用的安全机制，用于控制用户对系统资源的访问权限。Yii2框架内置了RBAC支持，使得开发者可以方便地实现角色和权限的管理。 在Yii2中，可以利用RBAC管理工具来创建和管理...
基于Django+vue3的rbac权限和数据权限管理系统.zip
01-15
是一个现代Web应用的实现，它结合了Python的Django框架与前端的Vue.js 3框架，用于构建一套完整的角色基础访问控制（Role-Based Access Control，RBAC）和数据权限管理解决方案。在这样的系统中，RBAC是一种权限分配...
前端权限控制与管理简单示例
11-17
在前端开发中，权限控制与管理是至关重要的一个环节，尤其在企业级应用中，确保用户只能访问和操作他们被授权的功能和数据是系统安全的基础。"前端权限控制与管理简单示例"这个项目旨在展示如何在前端实现一套完整的...
Go-基于GinCasbinAntDesignReact的RBAC权限管理脚手架
08-13
在这个项目中，React用于构建前端应用，与后端Gin通过RESTful API进行数据交互，实现页面的动态渲染和权限控制。React的生命周期方法和状态管理可以帮助开发者更好地组织代码，提高代码复用性。 至于压缩包中的...
beego admin ，权限rbac-admin.zip
01-29
beego 是一个高效、灵活的 Go 语言 Web 开发框架，它提供了丰富的功能，包括路由管理、ORM（对象关系映射）、模板渲染等，帮助开发者快速构建 web 应用程序。beego admin 是 beego 框架的一个扩展，专为构建后台管理...
RBAC 动态权限
Bruce__taotao的博客
05-26 1019
前端学java，用于记录学习，AI辅助创作，有错误之处，欢迎交流指正。👏🏻由于MyBatis-Plus已经简化了数据访问层的操作，我们可以直接在@Service@Autowired@Autowired@Override// 通常情况下，权限也会通过角色间接关联，这里简化处理。
动态菜单/RBAC标准完整权限管理系统的实现,通用角色权限控制系统五张表逻辑关联设计实现
wh445306
11-15 7882
序言： 众所周知，权限系统是每个系统里面必备的最基本的系统，然而权限系统设计有时挺麻烦的，，现在整理了下，给正在开发此模块的朋友一个思路！ 　　设计基础：用户、角色、权限三大核心表，加上用户角色、角色权限两个映射表(用于给用户表关联上权限表)。这样就可以通过登录的用户来获取权限列表，或判断是否拥有某个权限。 　　大致用到５张表：用户表（s_user）、角色表（s_role）、菜单表（s_menu）、用户角色表（s_user_role）、角色菜单表（s_role_menu）<注：表前加前缀s代表这
基于 RBAC 简单实现动态菜单及权限管理
热门推荐
zhou6343178的博客
03-09 1万+
RBAC(Role-Based Access Control, 基于角色访问控制) 原理及设计逻辑参考：点击打开链接项目地址：GitHub：点击打开链接项目介绍：1、基于 SpringBoot 2、基于 JWT 实现前后分离,Spring Security 安全控制3、前端采用 topjui （基于 easyui 的美化框架 ）4、实现了三级动态菜单、页面按钮动态授权功能5、实现了用户管理、菜单管...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值