【陪诊系统-PC管理端】动态路由

先说说这里为什么要使用动态路由?

因为前面的菜单管理功能模块中,可以创建或修改不同权限,当前登录账号可以绑定不同的权限,不同权限能访问的功能页面不同,所以使用动态路由来控制。


而登录成功后,服务器返回的数据中component的属性值是个路径(见图),但实际上我们需要的是一个vue文件,需要根据现在得到的component的路径找到vue文件

这是之前写死的路由信息,component部分是直接通过开头的import找到组件,所以需要把当前获取到的返回数据稍作处理


这里借助vite的glob,从文件系统导入模块。然后将更新后的路由列表挂载到state上

javascript 复制代码
dynamicMenu(state, payload) {
        console.log(payload);
        // 通过glob导入模块
        // 获得的是每个views下面的路径
        // 导入view文件下的文件下的文件中的所有后缀为vue的
        const moudules = import.meta.glob('../views/**/**/*.vue')
        console.log('moudules:', moudules);
        function routerSet(router) {
            router.forEach(route => {
                // 有componnet就代表如果当前路由下没有孩子 就拼接路由路径
                if (!route.children) {
                    const url = `../views${route.meta.path}/index.vue`
                    // 拿到获取的vue组件 设置导路由配置的component上
                    route.component = moudules[url]
                } else {
                    // 有子菜单就要递归
                    routerSet(route.children)
                }
            });
        }
        // 拿到完整的路由数据进行递归
        routerSet(payload)
        //将更新后的路由列表挂载state上
        state.routerList = payload
    },

登录界面中登录完成后,根据当前用户权限列表,添加动态路由,控制其访问权限

javascript 复制代码
 			// 登录页面
            login(loginForm).then(({data})=>{
                if(data.code === 10000){
                    console.log('登录成功');
                    ElMessage.success('登录成功')
                    // 页面跳转 token信息缓存
                    console.log('login',data);
                    localStorage.setItem('pz_token',data.data.token)
                    localStorage.setItem('pz_userInfo',JSON.stringify(data.data.userInfo))
                    menuPermissions().then(({data})=>{
                        // 调用store里面的动态菜单函数将component的路径变成完整vue文件路径
                        store.commit('dynamicMenu',data.data)
                        //更新之后动态的路由信息 通过computed获取到state里的数据
                        console.log('routerList',routerList);
                        // toRaw把响应式的数据变成普通的对象数据 只需要保存main 原始第一个路由路径 后面的都根据下面动态添加
                        toRaw(routerList.value).forEach(item => {
                            // 添加动态路由
                            router.addRoute('main',item)
                        });
                        // 登录成功跳转到首页
                         router.push('/')            
                    })
                }
            })

that's all

相关推荐
CODE_RabbitV3 分钟前
【1分钟速通】 HTML快速入门
前端·html
weixin_459793105 分钟前
SSE 模仿 GPT 响应
前端
rookie fish10 分钟前
Electron+Vite+Vue项目中,如何监听Electron的修改实现和Vue一样的热更新?[特殊字符]
前端·vue.js·electron
她超甜i15 分钟前
前端通过后端给的webrtc的链接,在前端展示,并更新实时状态
前端·javascript·webrtc
歪歪10021 分钟前
Redux和MobX在React Native状态管理中的优缺点对比
前端·javascript·react native·react.js·架构·前端框架
东风西巷25 分钟前
Atlantis Word Processor:全方位的文字处理专家
前端·学习·word·软件需求
今天不要写bug37 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优40 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k1008640 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐40 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router