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

ops/2024/12/22 19:34:37/

发现宝藏

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


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

1. 功能菜单权限(模块权限)

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

实现步骤:

  1. 设计权限表

    • 功能菜单权限表:记录每个功能菜单的权限信息。
    • 角色表:定义系统中的角色(如管理员、普通用户、客服等)。
    • 角色与权限关系表:关联每个角色与其拥有的权限。
  2. 用户与角色关系

    • 用户可以分配到一个或多个角色。
    • 每个角色与多个权限关联。
  3. 权限校验

    • 用户登录后,系统根据其角色获取权限,并在后台接口中进行权限校验。
    • 前端页面根据用户的权限动态渲染菜单项,隐藏无权限的菜单。

表结构设计:

-- 权限表:记录每个功能菜单的权限标识符
CREATE TABLE permissions (id INT PRIMARY KEY AUTO_INCREMENT,name VARCHAR(255) NOT NULL,   -- 权限名称,例如:用户管理permission_key VARCHAR(255) NOT NULL,   -- 权限标识符,供系统使用,例如:user_managementdescription 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 Truereturn 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. 按钮权限(操作权限)

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

实现步骤:

  1. 设计按钮权限表

    • 按钮权限表记录每个操作的权限标识符(例如:create_user, edit_user, delete_user 等)。
  2. 角色与按钮权限关系

    • 角色与按钮权限之间的关系类似于功能权限。
  3. 权限校验

    • 前端根据用户的按钮权限,动态控制按钮的显示与禁用状态。
    • 后端在接口中校验是否允许执行该操作。

按钮权限表设计:

-- 按钮权限表:记录每个功能按钮的权限标识符
CREATE TABLE button_permissions (id INT PRIMARY KEY AUTO_INCREMENT,permission_key VARCHAR(255) NOT NULL,  -- 按钮权限标识符,例如:create_userdescription 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 Truereturn 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"; // 隐藏按钮}});
}

3. 总结

功能权限(菜单权限):

  • 主要控制用户是否能访问特定的功能模块或菜单。
  • 通过角色和权限表来管理,前端根据权限控制菜单显示。

按钮权限:

  • 控制用户是否能够执行某些具体操作(如新增、编辑、删除等)。
  • 类似于功能权限的实现,前端控制按钮的显示与禁用,后端校验操作权限。

权限管理的核心:

  • 权限模型设计:通过多对多的关系设计(用户-角色、角色-权限、角色-按钮权限)来灵活管理权限。
  • 前后端协同:后端进行权限校验,前端根据权限动态渲染UI元素,确保只有授权用户才能访问功能和执行操作。

通过合理的权限控制体系,可以确保后台管理系统的安全性和高效性。


http://www.ppmy.cn/ops/144103.html

相关文章

在 Ubuntu 上安装 Muduo 网络库的详细指南

在 Ubuntu 上安装 Muduo 网络库的详细指南 首先一份好的安装教程是非常重要的 C muduo网络库知识分享01 - Linux平台下muduo网络库源码编译安装-CSDN博客 像这篇文章就和shit一样,安装到2%一定会卡住,如果你不幸用了这个那真是遭老罪了 环境&#xf…

时间序列异常值处理方法

文章目录 一、删除法二、替换法三、插值法四、滑动窗口五、基于模型的替换 时间序列相关参考文章: 时间序列预测算法—ARIMA 时间序列预测算法—Prophet 时间序列分类任务—tsfresh python时间序列处理 有季节效应的非平稳序列分析 时间序列异常值检测方法 时间序列…

前端图表与数据可视化 - 2024 年实战与面试重点

前端图表与数据可视化 - 2024 年实战与面试重点 目录 前言前端数据可视化概述常用数据可视化库对比 3.1 D3.js3.2 ECharts3.3 Chart.js3.4 AntV 数据可视化中的实战技巧 4.1 如何选择合适的图表类型4.2 数据清洗与格式化4.3 响应式图表布局与交互 实战:构建实时数据…

6_HTML5 SVG (2) --[HTML5 API 学习之旅]

SVG 矩形 SVG&#xff08;Scalable Vector Graphics&#xff0c;可缩放矢量图形&#xff09;是一种基于 XML 的标记语言&#xff0c;用于描述二维图形。<rect> 是 SVG 中的一个基本形状元素&#xff0c;用来绘制矩形。下面我将提供四个不同场景下的 <rect> 示例&a…

网络安全——对称加密与非对称加密

对称加密与非对称加密是两种基本的加密技术&#xff0c;它们在保护数据安全方面起着重要作用。以下是对这两种加密技术的详细解释&#xff1a; 一、对称加密 定义&#xff1a;对称加密指的是加密和解密使用同一个密钥&#xff0c;也称为私钥加密或共享密钥加密。 原理&#x…

【Linux】socket编程1

socket编程1 1. 网络字节序2. ip地址转换函数3. sockaddr数据结构 1. 网络字节序 多字节数据有大端和小端之分&#xff0c;网络数据流采用大端字节序&#xff0c;如果主机采用的是小端字节序&#xff0c;那么需要转换。 大端&#xff1a;低地址存高字节&#xff0c;高地址存低…

Roblox踩坑1——动画无法完整播放

在做一款挂机类游戏的时候&#xff0c;打算给地图怪物做一个被击败动画&#xff0c;我就在击败怪物的回调里面加了一个动画&#xff0c;但是无论如何都没办法正常的播放。 if humanoid then-- 创建一个 Animation 实例并设置动画 IDlocal animation Instance.new("Anima…

simsCheckbox无序列表转换jquery插件

simsCheckbox是一款可以将普通的html无序列表转换为bootstrap样式的checkbox列表的jquery插件。 在线演示 下载 使用方法 在页面中引入bootstrap样式文件&#xff0c;jquery和simsCheckbox.css&#xff0c;以及simsCheckbox.js文件。 <link rel"stylesheet" hre…