位置: 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 性能优化)

  • 你关注微博网红推送的广告要翻番了(你关注微博网红了吗)

    你关注微博网红推送的广告要翻番了(你关注微博网红了吗)

  • 剪映导出的视频保存在哪里(剪映导出的视频太大怎么办)

    剪映导出的视频保存在哪里(剪映导出的视频太大怎么办)

  • 苹果屏幕突然变暗调亮度也没用(苹果屏幕突然变大怎么回事)

    苹果屏幕突然变暗调亮度也没用(苹果屏幕突然变大怎么回事)

  • iqoou1后盖材质用的是什么(iqoou1后壳)

    iqoou1后盖材质用的是什么(iqoou1后壳)

  • 苹果双屏幕怎么用的(苹果如果双屏)

    苹果双屏幕怎么用的(苹果如果双屏)

  • 手机同步是什么意思

    手机同步是什么意思

  • 华为手机经常自动重启是什么原因(华为手机经常自动拨号怎么回事)

    华为手机经常自动重启是什么原因(华为手机经常自动拨号怎么回事)

  • 淘宝怎么退货?(淘宝怎么退货不用自己出运费)

    淘宝怎么退货?(淘宝怎么退货不用自己出运费)

  • 华为平板ags2al00叫什么(华为平板ags2al00是畅享几)

    华为平板ags2al00叫什么(华为平板ags2al00是畅享几)

  • 华为补电有坏处吗(华为补电有坏处嘛)

    华为补电有坏处吗(华为补电有坏处嘛)

  • 淘宝资质什么意思(淘宝资质什么意思10000)

    淘宝资质什么意思(淘宝资质什么意思10000)

  • 怎么p掉照片中不要的东西(怎么p掉照片中的背景)

    怎么p掉照片中不要的东西(怎么p掉照片中的背景)

  • 手机wps怎么制作封面(手机wps怎么制作文档)

    手机wps怎么制作封面(手机wps怎么制作文档)

  • wifi频率2.4ghz与5ghz的区别(wifi频率2.4ghz与5ghz哪个好)

    wifi频率2.4ghz与5ghz的区别(wifi频率2.4ghz与5ghz哪个好)

  • vivo怎么关运行软件(vivo怎么关运行软件?)

    vivo怎么关运行软件(vivo怎么关运行软件?)

  • ipadair可以接鼠标吗(ipad能接鼠标用吗)

    ipadair可以接鼠标吗(ipad能接鼠标用吗)

  • 手机的热点在哪里(手机热点怎么连接)

    手机的热点在哪里(手机热点怎么连接)

  • 手机自动返回怎么办(手机自动返回怎么设置)

    手机自动返回怎么办(手机自动返回怎么设置)

  • iphone怎么加密照片(如何加密iphone照片)

    iphone怎么加密照片(如何加密iphone照片)

  • vivox9怎么开启nfc功能(vivoX9怎么开启语音助手唤醒)

    vivox9怎么开启nfc功能(vivoX9怎么开启语音助手唤醒)

  • 抖音怎么关礼物特效(抖音怎么关礼物功能)

    抖音怎么关礼物特效(抖音怎么关礼物功能)

  • 华为手机怎么关掉提醒(华为手机怎么关闭纯净模式)

    华为手机怎么关掉提醒(华为手机怎么关闭纯净模式)

  • 如何让vivo手机不卡(如何让vivo手机更流畅)

    如何让vivo手机不卡(如何让vivo手机更流畅)

  • 苹果ipad美版和国行的区别(ipad美版区别)

    苹果ipad美版和国行的区别(ipad美版区别)

  • 迅雷如何切换音轨(迅雷怎么切换音频)

    迅雷如何切换音轨(迅雷怎么切换音频)

  • 电脑表格数字打不出来(电脑表格数字打不出来是怎么回事)

    电脑表格数字打不出来(电脑表格数字打不出来是怎么回事)

  • win8系统还原怎么操作呢?win8电脑系统还原详细步骤(win8电脑系统还原)

    win8系统还原怎么操作呢?win8电脑系统还原详细步骤(win8电脑系统还原)

  • 车船使用税代扣怎么计算
  • 设计合同服务期限怎么写
  • 购销合同印花税按70%
  • 个体工商户季度不超过30万免增值税吗
  • 科技型中小企业申请流程
  • 管道安装固定方式
  • 银行付款回单怎么看
  • 别人给开的普通发票能抵扣多少税
  • 非独立核算的分公司可以开票吗
  • 公司的车辆赠送公司
  • 国外客户给你寄来礼物怎么感谢
  • 固定资产不动产抵扣新政策
  • 划拨土地使用权出租
  • 货物运输企业的经营方式
  • 租个人房子开发票税率是多少
  • 开具的增值税发票丢失最新处理办法
  • 金税盘开票时间不对怎么办
  • 税收分类编码里的劳务是劳务派遣的意思吗
  • 交通卡定额发票购买
  • 公司账上没钱股东又不出资发工资怎么办
  • 专业服务业政策
  • 怎么样防止蹭wi-fi
  • linux root没有权限
  • hpcfont.dll
  • win10设置闹钟
  • 商品盘点短缺和溢余的核算
  • 成本法变为权益法剩余股权
  • 提取企业发展基金用到银行存款科目吗
  • 其他应收款的审计重点不包括哪些
  • 债务重组亏损计入
  • 企业工会注销怎么办理
  • 工资应发数就是企业的成本
  • 残保金政策建议
  • php中get_magic_quotes_gpc()函数说明
  • php变量使用之前需要定义变量类型
  • php返回数据给ajax
  • vue3的unplugin-auto-import自动引入
  • 使用vue要安装什么软件
  • php 文件目录
  • 销售商品怎么做好宣传
  • word element
  • 进口关税账务处理办法
  • 支付版权使用费怎么记账
  • 个人发票抬头是自己的名字吗
  • 新版电子税务局怎么增加办税人员
  • 认缴股权的转让
  • 处置固定资产亏损,增值税所得税申报不一至情况说明
  • 结转收入及成本费用
  • 股东打给公司的投资款
  • 每季度末是什么意思
  • 电子承兑过期了
  • 研发费用 汇算清缴
  • 置换补贴算在优惠价里吗
  • 高新技术企业研发费用占比要求
  • 高新技术企业外债便利化额度试点重庆
  • 三项费用合计包括哪些
  • 预计负债是暂时性差异还是永久性差异
  • 公司购轿车会计分录怎么做
  • 小规模一季度不超过30万是不含税吗
  • 如何审计主营业务收入的真实性问题
  • 开票方与付款方不一致问题
  • 盈余公积必须提折旧吗
  • mysql在查询结果中查询
  • mysql 5.7.33安装
  • win 9x
  • windows10下软件的app
  • 手机苹果操作系统
  • 创建软链接 linux
  • centos7 中文支持
  • windowxp怎么设置密码
  • win7不重装修复系统
  • org.cocos2d.straydiary
  • unity3d手机怎么打开
  • 非营利组织税务处理
  • 纳税人接受教育
  • 新办纳税人是什么多久之内
  • 西安税务总局
  • 非载货专项作业车属于什么车
  • 2021年小规模纳税人优惠政策
  • 商品房开超市
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设