最好旅游网站建设,wordpress 礼物说模板,专业建设工作计划,wordpress链接公众号开发后台管理系统必备的需求#xff1a;动态菜单权限管理、或者说路由权限动态管理 原理是通过addRoute实现路由权限控制#xff0c;一般分为两种#xff1a;
后端生成当前用户相应的路由后由前端#xff08;用 Vue Router 提供的API#xff09;addRoutes 动态加载路由前…开发后台管理系统必备的需求动态菜单权限管理、或者说路由权限动态管理 原理是通过addRoute实现路由权限控制一般分为两种
后端生成当前用户相应的路由后由前端用 Vue Router 提供的APIaddRoutes 动态加载路由前端写好所有的路由后端返回当前用户的角色然后根据事先约定好的每个角色拥有哪些路由对角色的路由进行分配
这里就不具体论述了
这里介绍一个个人研究的在vitevue3下的动态菜单权限管理实现方案 这是一个由后端动态菜单控制的解决方案需要后端传异步组件的路径值 基于异步组件和动态组件而不是addRoute
1.使用vue3和vite语法
defineAsyncComponent是vue3定义异步组件的api import.meta.glob是vite的批量导入语法
script
import { defineAsyncComponent } from vue
let modules import.meta.glob(../dynamicComponent/**/*.vue)2.管理系统左侧一般是树菜单右侧是对应菜单内容
第一步肯定是请求后端获取左侧树菜单点击单个树菜单右侧显示对应菜单内容 在上一步我们已经通过vite批量导入获取dynamicComponent文件夹下所有vue文件信息在computed里面拼接动态组件路径即可
methods: {/** 获取树菜单数据 */async loadTreeData() {const { data: res } await http.post(xxx)if (res.code 0) {this.treedata res.data}},/** 点击单个树菜单 */handleNodeClick(data) {this.currentNode data},computed: {/** 动态组件 */dynamicComponent() {// 这里是点击树节点后树节点上的数据vueUrl字段是跟后端沟通后返回的前端项目vue文件路径let filename this.currentNode.vueUrl return defineAsyncComponent(modules[../dynamicComponent/${filename}.vue])},},3.动态组件
div classcontainerdiv classtree.../divdiv classtree-righttransition namefade-transform modeout-incomponentv-ifdynamicComponent:isdynamicComponent/component/transition/div/div可以看到核心代码思路其实是非常简单的开发右侧内容区域的vue页面只需要放在dynamicComponent文件夹下跟后端沟通好文件路径传值即可 比如后端传值user/common对应前端项目vue文件路径是dynamicComponent/user/common.vue
安全性思考
dynamicComponent方案是具备安全性的因为异步组件和动态组件只能通过后端传值的方式进行vue页面渲染用户是不能通过路由进行页面访问的 假设网站攻击者可以伪造后端返回结果那这种情况下当然可以访问到dynamicComponent的页面但同理这种也可以访问到addRoute的页面所以这点上两者安全性是一样的并且项目开发中一般还会有token请求头页面数据请求会进行校验所以综上dynamicComponent解决方案比较addRoute方案并没有安全性问题
