vue-cms 权限体系终极指南路由权限 按钮权限双管齐下的完整方案【免费下载链接】vue-cms基于 Vue 和 ElementUI 构建的一个企业级后台管理系统项目地址: https://gitcode.com/gh_mirrors/vu/vue-cmsvue-cms 是一个基于 Vue 和 ElementUI 构建的企业级后台管理系统其权限体系是众多开发者最关心的核心模块。本文将从零开始带你彻底搞懂 vue-cms 权限体系的设计思路与落地细节如何用路由权限控制用户能看到哪些页面如何用按钮权限控制用户能操作哪些功能以及前后端权限数据是如何打通协作的。无论你是刚入门 Vue 的新手还是想借鉴成熟方案的进阶开发者这份 vue-cms 权限体系完整指南都能让你快速上手。一、为什么后台管理系统离不开权限体系后台管理系统承载着企业内部的数据与业务操作如果没有权限控制任何登录用户都能访问全部页面、执行所有操作后果不堪设想。一个完善的后台权限体系通常要回答三个问题菜单权限左侧导航栏显示哪些菜单按角色过滤路由权限用户手动输入 URL 时能否访问对应页面按地址拦截按钮权限页面上的新增、编辑、删除、导出等按钮是否展示按操作点控制vue-cms 权限体系巧妙地把这三者统一在了一套数据结构里用type字段区分权限类型逻辑清晰、扩展方便。二、vue-cms 权限体系的核心设计type 一分为三先看整个权限体系的地基。在 src/utils/validate.js 中vue-cms 定义了三种权限类型type 值权限含义说明1menu菜单控制一级/二级菜单的显示2page页面控制具体路由页面能否访问3btn按钮控制页面上操作按钮是否展示其中isMenuPermissionByType()判断是否为菜单/页面权限type 1 或 2isBtnPermissionByType()判断是否为按钮权限type 3。这个设计意味着菜单、页面、按钮全部由后端统一返回前端只负责解析和渲染非常符合企业级项目权限配置归后端管的最佳实践。后端返回的权限数据结构长什么样在 mock 数据 src/mock/modules/user.js 中可以看到admin账号返回了完整的 permissions 数组每个权限项包含type和address两个关键字段address必须是完整的路由路径如/excel/export-excel这是前后端匹配的暗号对比lucy账号它只拥有/excel相关页面和/theme的权限登录后左侧菜单自然少一大截三、路由权限实现登录后动态注入可访问路由路由权限是 vue-cms 权限体系的第一道防线完整流程分为登录存储 → 守卫校验 → 动态注册三步。第一步登录成功后把权限写入 Session用户点击登录后src/store/modules/user.js 中的loginaction 会做三件事把 token 写入 Cookie把后端返回的 permissions 存入 SessionStorage键名为userRoutes同步把用户信息存入 SessionStorage这里把权限数据持久化到 Session是为了刷新页面后权限不丢失同时退出登录时 Session 会被清空保证数据安全。第二步全局路由守卫统一拦截src/permission.js 是 vue-cms 权限体系的总闸门通过router.beforeEach全局前置守卫实现无 token访问白名单页面/login等直接放行否则重定向到登录页并带上redirect参数登录后自动跳回原页面有 token 但动态路由为空先从 Session 读取userRoutes调用permission/generateRoutes生成该用户的路由表再通过router.addRoutes()动态注册最后用next({ ...to, replace: true })重新触发导航确保路由注册完成有 token 且路由已注册直接放行这个守卫还内置了异常兜底如果 Session 中连权限数据都没有会自动调用user/resetToken退出登录并清空 Session避免用户卡在死循环里。第三步前端动态路由与后端权限做双表匹配真正的路由过滤逻辑在 src/store/modules/permission.js 的generateRoutesaction 里从后端 permissions 中按 type 拆分成菜单权限表和按钮权限表按钮权限的address汇总成数组存入state.btns供按钮级控制使用菜单/页面权限通过filterAsyncRoutes与前端asyncRoutes逐条比对后端的 address 等于前端路由的 path 才算有权限见 permission.js 的递归过滤过滤后的路由再拼接上endBasicRoutes404、无权限页面最后commit(SET_ROUTES)保存而前端完整的动态路由表定义在 src/router/index.js包含自定义组件、ECharts 可视化、Excel 表格、富文本等全部业务模块每一级的path都必须是完整路径这是与后端address匹配的前提。基础路由constantRoutes登录页、首页等则任何角色都可访问见 src/router/index.js。 进阶提示把后端权限与前端路由双表匹配的设计让新增页面只需在asyncRoutes注册一次后端配置好 address 即可无需改动权限判断逻辑非常利于多人协作。四、按钮权限实现type3 的精细控制路由权限解决了看得到什么按钮权限则解决点得了什么。在generateRoutes中type 为 3 的权限项会被收集成按钮地址数组src/store/modules/permission.js通过SET_BUTTONS存进state.btns。在实际页面中开发者只需判断当前按钮地址是否存在于btns数组中用v-if控制按钮显隐即可。比如用户没有导出权限导出按钮就不会渲染。这种方案相比单纯用角色role判断可以精细到每个用户、每个操作点是权限体系从粗粒度走向细粒度的关键一步。五、菜单权限动态路由如何变成左侧导航路由注册完成后左侧菜单的渲染同样基于这份过滤后的路由表。src/layout/sidebar/sidebar-item.vue 递归渲染菜单项hidden: true的路由如登录页、404不会出现在菜单中只有唯一可见子路由时自动上提为一级菜单alwaysShow: true强制显示为父级菜单也就是说菜单本身就是路由的可视化投影——后端没给权限的路由根本不会进入路由表自然也不会出现在菜单里做到了一处控制、处处生效。六、完整的 vue-cms 权限体系工作流程总结把上述模块串起来一次完整的权限校验是这样的用户访问页面 → 触发全局路由守卫beforeEach无 token → 重定向登录页有 token → 检查动态路由是否已生成首次进入 → 从 Session 读权限 →generateRoutes拆分为菜单/页面权限与按钮权限前端asyncRoutes与后端权限逐条匹配 → 拼接endBasicRoutes→router.addRoutes动态注册侧边栏基于最终路由渲染菜单页面内基于btns数组用v-if控制按钮退出登录 → 清空 token、Session、重置路由resetRouter七、学习 vue-cms 权限体系的最佳路径如果你想亲手跑起来验证这套权限方案可以这样快速上手克隆项目git clone https://gitcode.com/gh_mirrors/vu/vue-cms本地启动安装依赖后运行开发服务用admin和lucy两个账号分别登录密码与账号同名对比左侧菜单的差异直观感受路由权限的效果修改权限数据在 src/mock/modules/user.js 中给lucy增加/删除 permissions 项刷新后观察菜单变化代码走读顺序建议按src/permission.js→src/store/modules/permission.js→src/router/index.js→src/mock/modules/user.js的顺序阅读先看流程再看数据理解效率最高动手改造尝试给某个页面加一个 type3 的按钮权限项用btns数组控制按钮显隐把按钮权限彻底吃透八、写在最后这套权限方案好在哪vue-cms 权限体系的精髓可以概括为三点统一数据模型菜单、页面、按钮权限共用一套 permissions 结构用 type 区分后端一套接口搞定双表匹配机制前端路由表与后端权限表通过完整路径匹配权限变更零侵入双层防线路由守卫拦截页面访问 按钮权限控制操作展示纵深防御对于正在开发企业级后台管理系统的你来说这套路由权限 按钮权限双管齐下的方案既是拿来即用的完整实现也是理解权限设计哲学的优秀教材。希望这份 vue-cms 权限体系指南能帮你少走弯路快速构建属于自己的权限中台。【免费下载链接】vue-cms基于 Vue 和 ElementUI 构建的一个企业级后台管理系统项目地址: https://gitcode.com/gh_mirrors/vu/vue-cms创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
