微前端qiankun动态路由权限设计与数据通信方案
思路:
权限控制中心化:主应用负责统一的管理权限,子路由上报路由信息
动态路由加载:根据用户权限动态注册可用路由
数据通信机制
主应用和子应用:通过qiankun提供的props和全局状态
子应用和子应用:通过全局事件总线或状态管理
代码实现:
主应用配置:路由权限管理(src/permission.js)
import {asyncRoutes} from './router'
import {getPermissionFromApi} from '@/api/auth'const permission = {state: {routes: [],addRoutes: []},mutations:{SET_ROUTES:(state,routes) => {state.addRoutes = routesstate.routes = constantRoutes.concat(routes)}},actions:{// 生成动态路由GenerateRoutes({commit},roles)}
}