位置: IT常识 - 正文

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

编辑:rootadmin
vue3 一个基于pinia简单易懂的系统权限管理实现方案,vue-router动态路由异步问题解决 文章目录前情提要应用场景实战解析1、控制添加路由2、实践观察3、控制功能4、解决异步路由问题最后前情提要

推荐整理分享vue3 一个基于pinia简单易懂的系统权限管理实现方案,vue-router动态路由异步问题解决(vue3的理解),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0用法,vue3.0用法,基于vue的ui,基于vue的项目,基于vue的app,基于vue3.0,vue3例子,基于vue的ui,内容如对您有帮助,希望把文章链接给更多的朋友!

作为项目经验稀少的vue开发者来说,在关键技术点上的经验不多,我希望通过我的思想和实践,把好的东西分享在这里,目的是进一步促进技术交流。项目即将完成,权限是最后的收尾工作,好的权限实现方案,可以让我们没有后顾之忧,也可以提升项目的运行速度。

应用场景

在开发之前,我粗略的浏览了一些权限实现方法,可以说智者见智吧,例如一种实现方案是在router的守卫里判断,我认为虽然实现了功能,但是增加了路由的功能压力。我们的需求是登录后即获知权限,根据权限提供功能;根据以上俩点需求我做出了如下计划:

找一个合适的入口,判断要提供的菜单以及用户拥有什么权限,不能影响页面加载在对应的页面中拿到权限,提供需要的功能必须整个系统都可以轻易拿到,且要避免安全问题实战解析

大多的实现方案是添加路由,我也实践了一次,发现存在路由重定向问题,于是我准备反其道而行,初始提供所有路由,根据权限移除不需要的路由,上面我分析到,我不想给导航守卫添加过多的压力,避免影响页面渲染,所以我利用了pinia状态库+router.removeRoute来实现路由的控制;

1、控制添加路由

首先我们应该准备基础的router配置,包括公共页面,异常页面等:

//router/index.jsimport { createRouter, createWebHistory } from 'vue-router'import { useUsersStore } from "@/store/user";import Cookies from "js-cookie";import { isUserTime } from "@/tool/unitl.js"const routes = [ { path: '/', name: 'Index', component: () => import('@/view/Index.vue'), }, { path: '/login', name: 'Login', component: () => import('@/view/Login.vue') }, { path: '/business', name: 'Business', component: () => import('@/view/business/Index.vue') }, { path: '/business/project', name: 'BusinessProject', component: () => import('@/view/business/Project.vue') }, { path: '/commerce', name: 'Commerce', component: () => import('@/view/commerce/Index.vue') }, { path: '/commerce/project', name: 'CommerceProject', component: () => import('@/view/commerce/Project.vue') }, { path: '/consult', name: 'Consult', component: () => import('@/view/consult/Index.vue') }, { path: '/consult/project', name: 'ConsultProject', component: () => import('@/view/consult/Project.vue') }, { path: '/finance', name: 'Finance', component: () => import('@/view/finance/Index.vue'), children: [ { path: 'projects/project', name: 'FinanceProjectsProject', component: () => import('@/view/finance/projects/Project.vue') }, { path: 'employee/project', name: 'FinanceEmployeeProject', component: () => import('@/view/finance/employee/Project.vue') }, { path: 'account', name: 'FinanceAccount', component: () => import('@/view/finance/account/Index.vue') }, { path: 'authority/project', name: 'FinanceAuthority', component: () => import('@/view/finance/authority/Project.vue') } ] }, { path: '/chief', name: 'Chief', component: () => import('@/view/chief/Index.vue'), children: [ { path: 'first_examine/project', name: 'firstExamineProject', component: () => import('@/view/chief/first_examine/Project.vue') }, { path: 'second_examine/project', name: 'secondExamineProject', component: () => import('@/view/chief/second_examine/Project.vue') } ] }, { path: '/email', name: 'Email', component: () => import('@/view/email/Index.vue') }, { path: '/person', name: 'Person', component: () => import('@/view/person/Detail.vue') }, { path: '/:pathMatch(.*)*', name: '404', component: () => import('@C/tool/Page404.vue') }]const router = createRouter({ history: createWebHistory(), //history routes})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" };});export default routervue3 一个基于pinia简单易懂的系统权限管理实现方案,vue-router动态路由异步问题解决(vue3的理解)

以上代码为router所有前期需要准备的代码,已经我处理路由异常情况的实现方案,核心是利用: async await 俩个关键字实现,因为在登录后,我们配置移除菜单和权限是需要时间的,必须要严格控制异步,这里也顺便处理了路由输入回车跳转情况, 通过await store.Login(to);传入了to的参数来判断如何跳转,接下来参考下我的pinia仓库实现过程;

//src/store/user.tsimport { defineStore } from 'pinia'import { apiGetUser } from '@/axios/user.js'import CryptoJS from 'crypto-js'import router from '@/router/index.js'// 第一个参数是应用程序中 store 的唯一 idexport const useUsersStore = defineStore('users', { state: () => { return { isLogin: false, phone: sessionStorage.UserN ? CryptoJS.AES.decrypt( sessionStorage.getItem('UserN'), "abc!" ).toString(CryptoJS.enc.Utf8) : '', pwd: "", deptno: "", idCard: "", lockState: "", birthday: "", name: "", sex: "男", power: '',//权限:0-admin,1-部门总负责人,2-部门项目负责人,3-部门成员 showMenu: '', } }, actions: { Login(to) { let _that = this; let MenuArray = ['Business', 'BusinessProject', 'Commerce', 'CommerceProject', 'Consult', 'ConsultProject', 'Finance', 'Chief']; return new Promise((t, f) => { _that.isLogin = true; let data = new FormData(); data.append('loginAct', _that.phone) apiGetUser(data).then(res => { let { deptno, idCard, lockState, name, sex, birthday } = res, showMenu = deptno.charAt(0); console.log(res); _that.$patch({ deptno, idCard, lockState, name, sex, birthday, showMenu }) if (showMenu == 'R') { t(true) } else { //过滤菜单项 switch (showMenu) { case 'A': MenuArray = MenuArray.filter(item => { return item.indexOf('B') == -1 }); break; case 'B': MenuArray = MenuArray.filter(item => { return item.indexOf('Com') == -1 }); break; case 'C': MenuArray = MenuArray.filter(item => { return item.indexOf('Con') == -1 }); break; case 'D': MenuArray = MenuArray.filter(item => { return item.indexOf('F') == -1 }); break; case 'E': MenuArray = MenuArray.filter(item => { return item.indexOf('Ch') == -1 }); break; } //循环移除 let Length = MenuArray.length; MenuArray.forEach((item, index) => { if (index == Length - 1) { router.removeRoute(item); if(to.name && router.hasRoute(to.name)){ t(true) }else{ t(false) } } else { router.removeRoute(item) } }) } }) }) }, },})

这里我直接展示了我的代码,如果你不熟悉pinia,要抓紧补了,在用户登录验证成功后,这里会调用user库的login函数,也会携带路由要to的参数,这里只需要明确几个点即可:

MenuArray,将来用来循环removeRoute使用的数组,映射路由name根据自己的配置规则,筛选 MenuArray通过index == Length - 1 严格控制最后一次移除,并且判断to.name是否合法理解await原理,await必须出现在async函数中,且 返回函数如果是Promise,则只接受resolved中的值;router, 熟悉vue3的同志知道 有一个useRouter 驱动函数,在我们的方案里不能那样使用,因为useRouter必须在setup函数中使用;2、实践观察

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

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.jiuchutong.com/zhishi/295393.html 转载请保留说明!

上一篇:手把手教你实现一个JavaWeb项目:创建一个自己的网页博客系统(前端+后端)(一)(手把手教你实现用户登录界)

下一篇:PHP性能优化大全(php.ini)(php 性能优化)

  • 怎么在抖音群里发自己的名片(怎么在抖音群里踢人)

    怎么在抖音群里发自己的名片(怎么在抖音群里踢人)

  • 华为p30时间怎么设置24小时制(华为p30时间怎么调整)

    华为p30时间怎么设置24小时制(华为p30时间怎么调整)

  • 机械硬盘和固态硬盘的区别(机械硬盘和固态硬盘区别在哪)

    机械硬盘和固态硬盘的区别(机械硬盘和固态硬盘区别在哪)

  • 微信的浮窗是什么意思啊(微信的浮窗是什么意思)

    微信的浮窗是什么意思啊(微信的浮窗是什么意思)

  • 快手没点赞怎么看浏览记录(快手没点赞怎么看谁看过作品)

    快手没点赞怎么看浏览记录(快手没点赞怎么看谁看过作品)

  • 电话无法拨通,请将电话更改为本机号码是什么意思(电话无法拨通应该怎么办)

    电话无法拨通,请将电话更改为本机号码是什么意思(电话无法拨通应该怎么办)

  • 微信给好友发视频最多几分钟(微信给好友发视频)

    微信给好友发视频最多几分钟(微信给好友发视频)

  • 电脑机箱风扇声音很大(电脑机箱风扇声音大)

    电脑机箱风扇声音很大(电脑机箱风扇声音大)

  • soul软件头像的绿点是什么意思啊(soul app头像)

    soul软件头像的绿点是什么意思啊(soul app头像)

  • 为什么接了OTG手机不显示mp3(为什么接了OTG手机不显示mp4)

    为什么接了OTG手机不显示mp3(为什么接了OTG手机不显示mp4)

  • 电脑熄屏按什么键唤醒(电脑熄灭屏幕按哪两个按键)

    电脑熄屏按什么键唤醒(电脑熄灭屏幕按哪两个按键)

  • qq上删除好友 对方会知道吗(qq删除好友对方还有你吗)

    qq上删除好友 对方会知道吗(qq删除好友对方还有你吗)

  • 开通抖音小店需要多少保证金(开通抖音小店需要缴纳多少保证金)

    开通抖音小店需要多少保证金(开通抖音小店需要缴纳多少保证金)

  • tas-an00是华为什么型号(华为tas-an00参数)

    tas-an00是华为什么型号(华为tas-an00参数)

  • 怎么退出实名认证(怎么退出实名认证信息游戏)

    怎么退出实名认证(怎么退出实名认证信息游戏)

  • qq群投票怎么重新投(qq群投票如何再次发送到群里)

    qq群投票怎么重新投(qq群投票如何再次发送到群里)

  • 手机上vpu是什么意思(手机vpr是什么意思)

    手机上vpu是什么意思(手机vpr是什么意思)

  • 抖音不显示位置的原因(抖音不显示位置距离怎么设置)

    抖音不显示位置的原因(抖音不显示位置距离怎么设置)

  • 手机微信如何建群聊(手机微信如何建群)

    手机微信如何建群聊(手机微信如何建群)

  • oppoa11x怎么设置彩色字体(oppoa11x怎么设置小窗口)

    oppoa11x怎么设置彩色字体(oppoa11x怎么设置小窗口)

  • 淘宝双十一活动是什么(淘宝双十一活动淘气值多少可以参加)

    淘宝双十一活动是什么(淘宝双十一活动淘气值多少可以参加)

  • 滴滴出行是什么意思(滴滴出行是什么时候成立的)

    滴滴出行是什么意思(滴滴出行是什么时候成立的)

  • 苹果8p能用airpods吗(苹果8P能用电信卡吗)

    苹果8p能用airpods吗(苹果8P能用电信卡吗)

  • 新版Edge浏览器开启“全局媒体控件”功能(新版edge浏览器兼容ie)

    新版Edge浏览器开启“全局媒体控件”功能(新版edge浏览器兼容ie)

  • Safari浏览器快速访问.com后辍网站的小技巧(safari浏览器怎么快进)

    Safari浏览器快速访问.com后辍网站的小技巧(safari浏览器怎么快进)

  • 得了遗尿症应该怎么办?(得了遗尿症应该怎么办)

    得了遗尿症应该怎么办?(得了遗尿症应该怎么办)

  • 进项税额转出就是要多交税吗
  • 增值税发票查询网络异常
  • 电子承兑凭证
  • 占地面积的计算公式
  • 转出未交增值税年末怎么转平
  • 海关进口发票可以退税吗
  • 一般纳税人有免征增值税吗
  • 营业外收入是否属于当期损益
  • 接受的捐赠收入要交税吗
  • 企业资金运动包括哪几个环节
  • 固定增长定价模型
  • 现金收据为什么也在自制原始凭证的范畴呢?
  • 投资性房地产房租计入什么会计科目
  • 收到公司of
  • 香港公司在大陆设立子公司
  • 小规模季度销售超过30万怎么纳税
  • pdf格式发票怎么打印标准大小
  • 销售设备并安装
  • 小规模纳税人自来水税率
  • 转让土地使用权交什么税
  • 营业外支出汇算清缴调增填哪
  • 汽车发票抵扣联需要盖章吗
  • 公司原因领不了失业保险要赔偿吗
  • 个体工商户年检怎么办
  • 累进税率的特点是课税对象的数额越大,税率越
  • 经济作物国家有什么补助吗
  • mac侧边栏设置
  • office进程
  • thinkphp 数据库查询
  • 一般纳税人辅导期最新规定
  • Symfony学习十分钟入门经典教程
  • 磷酸二氢钙生产
  • 预缴企业所得税分录
  • 前端几种下载文件
  • 小规模纳税人工资要每月申报
  • vscode简单入门
  • 每个月需不需要期末结账
  • LangChain与大型语言模型(LLMs)应用基础教程:信息抽取
  • ucenter中词语过滤原理分析
  • 前端yck
  • yolov3实例
  • php file函数
  • php自定义函数格式是什么
  • 怎么保证发票是真的
  • 企业报表年报
  • python循环语句的语法
  • mongodb 聚合
  • 经典帝国cms生成器下载
  • 债权债务转让会计分录
  • 固定资产投资额在财务报表中怎么体现
  • 机械租赁收入算成本吗
  • 个贷系统平账专户a户为啥扣钱
  • 什么时候不能计入开办费
  • 销售退回跨年度的会计分录
  • 施工一个月多少钱
  • 发票失控成本怎么算
  • 独立核算好处
  • 企业备用金怎么做账
  • 企业应缴纳的消费税
  • select语句中的select*说明
  • session几种存储方式
  • mysql正则表达式匹配数字
  • ie8 开发者工具
  • linux监视内存详细信息命令
  • ubuntu虚拟机怎么改用户名
  • centos7 ip forward
  • windows xp怎么设置桌面
  • xp系统部分乱码解决
  • 电脑死机常见原因分析
  • 防止暴力破解的方法
  • Linux系统怎么设置中文输入法
  • 列举css的三种应用方式
  • 批处理加延时
  • “android”
  • u3d unity3d
  • jQuery版AJAX简易封装代码
  • JavaScript中Textarea滚动条不能拖动的解决方法
  • 小规模纳税人房土两税优惠政策
  • 税法查询系统
  • 重庆国税电子税务局手机版
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设