Bootstrap不提供权限控制逻辑，权限判断必须依赖后端返回的角色/权限数据，前端据此动态渲染菜单、按钮及操作列，并通过data-permission属性与JS统一校验实现按钮级、行级、Modal及Tab等多层级权限控制。
权限管理页不是 Bootstrap 内置功能
Bootstrap 本身不提供权限控制逻辑，它只负责 UI 层的样式和组件（比如表格、卡片、按钮、模态框）。真正的权限判断必须由后端返回用户角色/权限数据，前端用这些数据决定「渲染什么」和「显示哪些操作按钮」。直接拿 bootstrap.min.css 加几个 card 就叫权限页，上线后大概率被绕过或暴露敏感入口。
用 data-permission 控制按钮显隐更安全
别用 class 名（如 admin-only）做权限开关——class 可被手动修改。推荐在按钮、链接等交互元素上加自定义属性，比如 data-permission="user:delete"，再用 JS 统一过滤：
document.querySelectorAll('[data-permission]').forEach(el => {
const perm = el.getAttribute('data-permission');
if (!currentUserPerms.includes(perm)) {
el.remove(); // 或 el.style.display = 'none'
}
});
常见错误：把权限字符串硬编码在 HTML 里（如 <button data-permission="admin"></button>），但后端返回的是细粒度权限（["post:edit", "user:read"]），前后端约定必须一致。
表格行级权限要靠后端字段驱动
列表页常需「某行只能编辑不能删除」这类行级控制，不能靠 JS 算——用户可能篡改 DOM。正确做法是后端在每条数据里附带权限字段，例如：
[{
"id": 123,
"name": "张三",
"actions": ["edit", "reset-password"]
}, ...]
前端渲染时根据 item.actions 数组动态生成操作列：
- 有
"edit"→ 渲染「编辑」按钮 - 有
"delete"→ 渲染「删除」按钮（且绑定确认逻辑） - 没任何 action → 显示「无操作权限」占位文本
别省略这个字段，否则你得在前端写一堆 if-else 判断角色名，一加新角色就得改 JS。
Modal 和 Tab 的权限隔离容易被忽略
权限页常含「添加用户」弹窗（modal）或「角色配置」Tab 页，很多人只隐藏了入口按钮，却没拦住直接访问 #tab-roles 锚点或调用 $('#addUserModal').modal('show')。必须双重校验：
- 点击按钮前检查权限，无权则
return false - Modal 的
show.bs.modal事件里再校验一次，无权就event.preventDefault() - Tab 切换用
shown.bs.tab钩子拦截，无权则$('a[href="#tab-roles"]').tab('dispose')
最麻烦的是异步加载 Tab 内容（如角色列表），此时权限校验必须放在 AJAX 请求前，而不是等 HTML 插入后再删元素——网络请求本身已暴露接口路径。
