企业官网建设流程全解析

温州联科网站建设,网站显示wordpress,哈尔滨建设厅官网,医院官网[toc] 在 Vue 项目里#xff0c;权限问题永远不是“有没有”#xff0c;而是“会不会失控”。 一开始可能只是#xff1a; 登录校验菜单控制页面访问限制 但随着业务复杂度上来#xff0c;很容易演变成#xff1a; 路由守卫越写越多页面里到处是 if (hasPermission)前后端…[toc]在 Vue 项目里权限问题永远不是“有没有”而是“会不会失控”。一开始可能只是登录校验菜单控制页面访问限制但随着业务复杂度上来很容易演变成路由守卫越写越多页面里到处是 if (hasPermission)前后端权限逻辑不一致这篇文章我们不讲“能跑的权限”而是讲可扩展、可维护、长期稳定的权限系统设计。一、先明确权限系统到底在管什么先给一个非常重要的拆分权限 三件事能不能进这个路由能不能看到这个页面的入口能不能执行某个操作按钮级这篇文章重点讲第 1 件事路由权限。二、权限设计的核心原则在任何中大型项目里下面三条原则一定要守住。原则一权限是“声明式”的路由只声明自己需要什么权限而不是怎么判断。meta:{requiresAuth:true,roles:[admin]}原则二权限判断逻辑集中绝不分散在页面、组件、API 调用里。原则三路由权限 ≠ 菜单权限路由权限是否允许访问 URL菜单权限是否展示入口两者相关但不要强耦合。三、基础路由权限模型路由声明{path:/admin,component:()import(/views/admin/index.vue),meta:{requiresAuth:true,roles:[admin]}}全局守卫router.beforeEach((to,from,next){if(to.meta.requiresAuth!isLogin()){returnnext(/login)}next()})这是最基础的一层但还远远不够。四、角色权限系统的正确写法权限判断函数集中化functionhasPermission(routeRoles:string[]){constuserRolesgetUserRoles()returnrouteRoles.some(roleuserRoles.includes(role))}权限守卫router.beforeEach((to,from,next){const{roles}to.metaif(roles!hasPermission(roles)){returnnext(/403)}next()})好处权限逻辑只有一个入口改规则不用全局搜代码五、动态路由与后端权限中后台项目几乎都会遇到路由由后端返回前端动态注册后端返回示例[{path:/order,component:order/index,roles:[admin]}]前端动态注册constasyncRoutesmapBackendRoutes(routesFromServer)asyncRoutes.forEach(route{router.addRoute(route)})关键点前端仍然保留权限校验后端负责“能看到什么”前端负责“能不能访问”六、权限与页面逻辑解耦错误示例button v-ifuser.role admin删除/button正确做法constcanDeleteusePermission(delete_order)统一用权限 Hook / 方法避免散落逻辑。七、实战总结一个稳定的 Vue Router 权限系统应该做到路由声明权限守卫集中判断页面不感知权限逻辑支持后端动态配置