news 2026/4/18 10:50:23

权限动态管理

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
权限动态管理

权限动态管理

一般后台权限动态管理基于RBAC基于角色的访问控制官方标准实现,先由后端定义角色和系统全量菜单,再通过角色授权为不同角色分配不同菜单权限。用户登录时,后端根据其角色返回对应的权限菜单。路由是组件的映射关系,分为常量路由和权限路由,初始化创建路由实例时始终以常量路由为基础,权限路由是支撑所有功能的全量路由,新增功能只需扩展这个全量权限路由即可。

接下来我们根据后端返回的权限菜单,对全量权限路由做减法筛选,只保留当前角色有权限的路由,再通过Vue Router实例的addRoute方法,把筛选后的动态权限路由添加进去,这样就实现了不同角色对应不同菜单的权限控制。

刷新页面报404,是因为刷新会重新加载JS文件,此前动态添加的路由会丢失。我们将后端返回的权限菜单码缓存到sessionStorage,刷新后数据不会丢失,且权限路由是前端文件本身也不会丢失。所以在路由入口文件中,我们判断若缓存的权限菜单存在,就重新执行路由筛选、addRoute动态添加的逻辑,这个处理方法统一放到Vuex的Action里,再配合全局路由守卫,用户已登录且动态路由重新添加完成后直接放行,跳转到对应菜单页面,以此解决刷新404问题,实现权限的刷新保持。

另外,路由处理逻辑要放在Vuex的Action里,并非因为有异步请求,而是调用addRoute修改了全局路由实例,这属于副作用操作;而Vuex的Mutation只能做纯同步的State数据修改,不允许有任何外部副作用,所以即便只是纯前端的比对筛选操作,也必须放到Action中。且这个Action是纯前端操作,不会出现失败的情况,就算不手动return Promise也可以,因为Vuex的Action本身会自动返回一个Promise实例,默认是成功状态;若后续有失败场景,再手动return新的Promise控制成败即可。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/15 19:57:05

Vue过滤器

文章目录 1局部过滤器:2全局过滤器3过滤器使用 1局部过滤器: filters: {capitalize: function (value) {if (!value) return value value.toString()return value.charAt(0).toUpperCase() value.slice(1)} }局部的就在组件里跟data同级定义filters对…

作者头像 李华
网站建设 2026/4/18 10:04:27

什么情况下使用腾讯云服务器

腾讯云服务器(CVM)适用于需要弹性扩展、高可用性、企业级功能、专业运维支持的业务场景。具体来说,以下情况推荐使用腾讯云服务器:✅ 推荐使用腾讯云服务器的典型场景一、企业级生产环境核心业务系统部署:电商平台、ER…

作者头像 李华
网站建设 2026/4/17 15:19:42

必看!2026年十大溯源码好用的产品推荐榜单,引领安全追溯新风尚

在2026年,溯源码的应用日益广泛,成为产品质量管理的重要一环。本文将为您推荐十大优秀的溯源码产品,帮助您更好地实现产品追溯。这些工具不仅具备强大的功能,还能为各行业提供灵活的解决方案,确保产品安全与可靠性。每…

作者头像 李华
网站建设 2026/4/18 3:49:46

企微API突破:外部群的主动@全体成员实战

QiWe开放平台 个人名片 API驱动企微自动化,让开发更高效 核心能力:为开发者提供标准化接口、快速集成工具,助力产品高效拓展功能场景 官方站点:https://www.qiweapi.com 团队定位:专注企微API生态的技术服务团队 对接…

作者头像 李华
网站建设 2026/4/18 6:26:15

COMSOL模拟达西两相流在页岩气水平井压裂中的应力场耦合

comsol,达西两相流,页岩气水平井压裂,应力场耦合 页岩气开发这活儿,说简单点就是把石头缝里的气挤出来。水平井压裂技术就像给页岩层做"针灸",但这次用的不是银针而是高压液体。COMSOL在这场景里简直像瑞士军…

作者头像 李华