关于用户权限的设计,前端和后端都需要考虑

这是完全正确的,而且是非常必要的!您描述的这种控制方式是构建安全系统(特别是涉及权限管理)的核心安全实践,被称为**深度防御(Defense in Depth)**策略。

权限控制的深度防御策略

菜单按钮权限的控制必须是前后端结合的,绝不能仅依赖于前端。


1. 🛡 前端控制 (界面层控制)

目的: 优化用户体验 (UX),隐藏用户没有权限操作的界面元素(菜单、按钮、页面)。

方式 作用 风险 (如果只做前端控制)
菜单/路由 根据用户权限标识,动态生成侧边栏菜单和路由表。 用户依然可以通过直接输入 URL 访问页面。
按钮/元素 使用 V-if 或其他指令,根据权限判断是否渲染页面上的新增、删除、编辑等按钮。 恶意用户可以通过浏览器控制台(F12)绕过前端检查,手动调用被隐藏按钮对应的后端接口。

结论: 前端控制是用户体验优化 ,但不提供安全保障


2. 🔐 后端控制 (接口/资源层控制)

目的: 确保数据的安全性和操作的合法性,防止未经授权的访问和恶意操作。这是安全的核心防线

后端接口权限控制的实现要点:

2.1. 接口访问权限校验

每个涉及到敏感操作或数据的后端接口(API Endpoint)都必须在执行业务逻辑之前进行权限校验。

  • 实现方式: 在 Spring Boot 中可以使用 AOP (Aspect-Oriented Programming) 或自定义拦截器 (Interceptor)、过滤器 (Filter),在方法执行前检查用户的权限。
  • 校验内容:
    • 认证 (Authentication): 检查用户是否已登录(Token 是否有效)。
    • 授权 (Authorization): 检查该用户(或其角色)是否具有调用当前这个 API 接口(例如 /api/user/delete)的特定权限标识 (例如 user:delete)。

2.2. 数据权限校验 (行级/列级)

对于查询或更新数据的接口,除了检查接口调用权限外,还需要检查用户是否有权访问或修改该条数据

  • 场景: A 部门经理只能查看 A 部门员工的记录。
  • 校验内容: 在执行数据库查询时,根据用户的部门 ID 或角色,在 SQL 语句中动态添加 WHERE 条件,确保只能返回权限范围内的数据。

总结

您提出的观点是正确的:前端负责展示,后端负责安全

如果一个用户在菜单上看不到"删除"按钮,但后端没有对 /api/resource/delete 接口进行权限校验,那么任何了解该接口地址的用户(包括恶意爬虫或黑客)都可以轻易构造请求来执行删除操作,这将导致严重的安全漏洞。

必须使用同样的权限标识 (例如 user:manage)来同时控制前端菜单的显示和后端接口的调用。

相关推荐
晚霞的不甘2 分钟前
Flutter for OpenHarmony3D DNA 螺旋可视化:用 Canvas 构建沉浸式分子模型
前端·数据库·经验分享·flutter·3d·前端框架
a1117768 小时前
医院挂号预约系统(开源 Fastapi+vue2)
前端·vue.js·python·html5·fastapi
0思必得09 小时前
[Web自动化] Selenium处理iframe和frame
前端·爬虫·python·selenium·自动化·web自动化
行走的陀螺仪11 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
We་ct11 小时前
LeetCode 205. 同构字符串:解题思路+代码优化全解析
前端·算法·leetcode·typescript
2301_8127314112 小时前
CSS3笔记
前端·笔记·css3
ziblog12 小时前
CSS3白云飘动动画特效
前端·css·css3
越努力越幸运50812 小时前
CSS3学习之网格布局grid
前端·学习·css3
半斤鸡胗12 小时前
css3基础
前端·css
ziblog12 小时前
CSS3创意精美页面过渡动画效果
前端·css·css3