当前位置：首页 > article >正文

后台管理系统权限功能菜单和按钮权限如何实现的

article 2025/1/20 15:38:41

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

在后台管理系统中，权限控制是一个关键的组成部分，涉及功能菜单权限和按钮权限两个方面。通过合理的权限控制，可以确保不同用户或角色只能访问和操作他们被授权的功能。以下是实现这些权限的详细思路和步骤。

1. 功能菜单权限（模块权限）

功能菜单权限指的是用户是否能够访问后台管理系统的某些功能模块或菜单项。比如，一个管理员可能拥有完整的功能访问权限，而普通用户则只能访问部分功能。

实现步骤：

设计权限表：
- 功能菜单权限表：记录每个功能菜单的权限信息。
- 角色表：定义系统中的角色（如管理员、普通用户、客服等）。
- 角色与权限关系表：关联每个角色与其拥有的权限。
用户与角色关系：
- 用户可以分配到一个或多个角色。
- 每个角色与多个权限关联。
权限校验：
- 用户登录后，系统根据其角色获取权限，并在后台接口中进行权限校验。
- 前端页面根据用户的权限动态渲染菜单项，隐藏无权限的菜单。

表结构设计：

-- 权限表：记录每个功能菜单的权限标识符
CREATE TABLE permissions (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,   -- 权限名称，例如：用户管理
    permission_key VARCHAR(255) NOT NULL,   -- 权限标识符，供系统使用，例如：user_management
    description TEXT             -- 描述
);

-- 角色表：记录系统角色，例如：管理员、普通用户等
CREATE TABLE roles (
    id INT PRIMARY KEY AUTO_INCREMENT,
    role_name VARCHAR(255) NOT NULL   -- 角色名称，例如：管理员
);

-- 角色与权限关系表：记录每个角色具有哪些权限
CREATE TABLE role_permissions (
    role_id INT,
    permission_id INT,
    FOREIGN KEY (role_id) REFERENCES roles(id),
    FOREIGN KEY (permission_id) REFERENCES permissions(id)
);

-- 用户与角色关系表：记录每个用户所属的角色
CREATE TABLE user_roles (
    user_id INT,
    role_id INT,
    FOREIGN KEY (user_id) REFERENCES users(id),
    FOREIGN KEY (role_id) REFERENCES roles(id)
);

后端权限校验：

假设你使用的是一个基于角色和权限的系统，下面是一个简单的权限校验示例：

def check_permission(user_id, permission_key):
    # 查询用户角色
    roles = get_user_roles(user_id)
    # 查询角色的权限
    permissions = get_permissions_by_roles(roles)
    
    if permission_key in permissions:
        return True
    return False

前端动态菜单展示：

根据后台返回的用户权限，前端可以动态生成可见的菜单项。例如：

const userPermissions = ["user_management", "order_management"]; // 从后端获取的用户权限

function renderMenu() {
    const menuItems = [
        { id: "user_management", name: "用户管理" },
        { id: "order_management", name: "订单管理" },
        { id: "settings", name: "系统设置" }
    ];

    menuItems.forEach(item => {
        if (userPermissions.includes(item.id)) {
            document.getElementById(item.id).style.display = "block"; // 显示菜单项
        } else {
            document.getElementById(item.id).style.display = "none";  // 隐藏菜单项
        }
    });
}

2. 按钮权限（操作权限）

按钮权限是指用户在访问某个页面时，是否有权限进行某些操作（例如新增、编辑、删除等）。按钮权限通常是对功能权限的细化。

实现步骤：

设计按钮权限表：
- 按钮权限表记录每个操作的权限标识符（例如：create_user, edit_user, delete_user 等）。
角色与按钮权限关系：
- 角色与按钮权限之间的关系类似于功能权限。
权限校验：
- 前端根据用户的按钮权限，动态控制按钮的显示与禁用状态。
- 后端在接口中校验是否允许执行该操作。

按钮权限表设计：

-- 按钮权限表：记录每个功能按钮的权限标识符
CREATE TABLE button_permissions (
    id INT PRIMARY KEY AUTO_INCREMENT,
    permission_key VARCHAR(255) NOT NULL,  -- 按钮权限标识符，例如：create_user
    description TEXT  -- 按钮描述
);

-- 角色与按钮权限关系表：记录每个角色具有哪些按钮权限
CREATE TABLE role_button_permissions (
    role_id INT,
    button_permission_id INT,
    FOREIGN KEY (role_id) REFERENCES roles(id),
    FOREIGN KEY (button_permission_id) REFERENCES button_permissions(id)
);

后端权限校验：

类似于功能权限，按钮权限也需要在后端进行校验：

def check_button_permission(user_id, button_permission_key):
    # 查询用户角色
    roles = get_user_roles(user_id)
    # 查询角色的按钮权限
    button_permissions = get_button_permissions_by_roles(roles)
    
    if button_permission_key in button_permissions:
        return True
    return False

前端按钮权限控制：

前端可以根据按钮权限控制按钮的显示与禁用。例如：

const userButtonPermissions = ["create_user", "edit_user"]; // 从后端获取的按钮权限

function renderButtons() {
    const buttons = [
        { id: "create_user_btn", permission: "create_user" },
        { id: "edit_user_btn", permission: "edit_user" },
        { id: "delete_user_btn", permission: "delete_user" }
    ];

    buttons.forEach(button => {
        if (userButtonPermissions.includes(button.permission)) {
            document.getElementById(button.id).style.display = "inline-block"; // 显示按钮
        } else {
            document.getElementById(button.id).style.display = "none"; // 隐藏按钮
        }
    });
}