vue3 一个基于pinia简单易懂的系统权限管理实现方案，vue-router动态路由异步问题解决

阅读本书更多章节>>>>

文章目录

前情提要应用场景实战解析1、控制添加路由2、实践观察3、控制功能4、解决异步路由问题 最后

前情提要

我们的需求完美实现，接下来就是把不需要的菜单隐藏掉

3、控制功能

路由我们已经控制住了，隐藏菜单就很容易了，加载userStore 获取条件v-if即可，例如在header组件中：

//header.vueimport { useUsersStore } from "@/store/user.js"const user = useUsersStore();//html<el-menu-item index="/">首页</el-menu-item><el-menu-item v-if="'AR'.indexOf(user.showMenu) != -1" index="/business">业务部</el-menu-item><el-menu-item v-if="'BR'.indexOf(user.showMenu) != -1" index="/commerce">商务部</el-menu-item><el-menu-item v-if="'CR'.indexOf(user.showMenu) != -1" index="/consult">咨询部</el-menu-item><el-menu-item v-if="'DR'.indexOf(user.showMenu) != -1" index="/finance">财务部</el-menu-item><el-menu-item v-if="'ER'.indexOf(user.showMenu) != -1" index="/chief">总工办</el-menu-item>

这边根据自己团队的权限规范条件处理即可，其他的控制举一反三

4、解决异步路由问题

router.beforeEach(async (to, from) => {    //pinia仓库可以最早出现的地方，路由初始化完毕    const store = useUsersStore();    if (to.name == '404' && from.name == 'Login') {        //处理404问题，并且从login跳转任何404页面重置为Login页面        return { name: 'Login' };    } else if (store.isLogin) {         //不是404，登录状态在，正常跳转        return true;    } else if (isUserTime() && Cookies.get("loginPwd")) {         //刷新进入，判断是否过期了登录时间，Cookie中是否存在密码        //如果存在免登录，登录过程存在路由不存在问题则404，否则正常跳转        let exist = await store.Login(to);        if (!exist) return { name: '404' };    }    else return { name: "Login" };});

这里是我项目的路由守卫，它已经完成绝大部分功能，登录权限判断，404处理，刷新进入，状态持久化，异步操作在网络环境中是无法避免的，router官方示例也明确提醒了我们如何使用，这里我们是利用服务器数据判断要移除的菜单，且不说http响应异步，router.removeRoute()也只能是一次删除一个，所以在store.Login(to)我严格控制了逻辑，并且也解决了上述问题,使用我这样的全局守卫来配置必须要理清楚逻辑：依靠 async及await来实现，缺点是会有短暂的延迟，还不够流畅，但是笔者由于时间问题，不能再优化下去，希望大家吸取精华去掉糟粕。

至此我的分享结束，如果大家有更好的解决方案，希望可以进一步交流。

---

最后

📚 vue专栏
☃️ 个人简介：一个喜爱技术的人。
🌞 励志格言: 脚踏实地，虚心学习。
❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回、回访，欢迎进一步交流。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/guonei/2024-04-03/153454.html，文章来源：网络cs，作者：璐璐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！