微前端落地系列-复盘(上)

简介: 前沿:哈喽大家好,我是树酱🌲,好久不见。本文主要为了做复盘,在去年基于qiankun微前端架构的门户建设中,遇到的一些问题,可能你会认为:“哇,这也算问题吗?太简单了吧”。主要是分享在我认知体系内是如何解决的,如果对其中一些解决方案有更好的建议,记得在评论区留言~

微信截图_20220514184220.png


前沿:哈喽大家好,我是树酱🌲,好久不见。本文主要为了做复盘,在去年基于qiankun微前端架构的门户建设中,遇到的一些问题,可能你会认为:“哇,这也算问题吗?太简单了吧”。主要是分享在我认知体系内是如何解决的,如果对其中一些解决方案有更好的建议,记得在评论区留言~


微信截图_20220514184251.png


上图为落地过程中遇到的一些问题,接下来围绕这些问题跟大家分享我的认知体系是如何去解决的


1. 应用权限控制如何做?


权限控制一般分为:路由权限、按钮权限(视觉权限)等,下面举例说明


  • 路由权限:比如当用户从门户中登陆后,要访问应用A或者应用A下的某个菜单页面时,但该用户并没有该应用的访问权限,我们需要拦截它,不让它进入
  • 按钮权限 (视图权限):比如当某个用户不存在对某种资源进行删除的权限的时候,我们会将原有的删除操作按钮给隐藏,以此来实现按钮


👦 啊敏同学:那我们怎么知道是否有权限,或者说怎么区分资源类型?


🌲:mark,首先我们先给每个资源定义一个code编码,你可以理解为对这个资源的唯一标记,它的身份id,比如我们可能是应用、菜单或者按钮。针对不同类型的资源,可以做用规则区分,比如👇


微信截图_20220514184259.png


1.1 路由权限


👦 啊乐同学:那编码规则确定了,我们如何控制呢?


🌲:我们来假设一个用户有一个资源集合的权限


[appliction:monitor、menu:monitor:flume、button:monitor:flume:delete]


首先先说路由权限控制,主要是为了判断该用户是否有应用或者菜单的访问权限,我们一般可以在router.beforeEach 导航守卫中做拦截,一般分为两种情况


  • 动态路由:原先并未添加路由,根据上文提到的资源编码来动态添加路由,可参考🌲树酱之前写的关于门户的前端权限控制
  • 静态路由:已经初始化好路由,通过统一在门户这个主应用的路由根据获取的资源编码来判断当前访问的用户是否有应用访问权限,如果没有则进行拦截,如下所示是门户这个主应用对路由的处理,因为当子应用加载后,主应用会劫持原本子应用的路由,举个例子如下 👇


微信截图_20220514184316.png


上图中的hasPerssion方法就是通过判断该用户是否有某个应用的资源编码,以此来判断是否有权限访问,本质上就是new RegExp正则匹配,如果没有权限则跳转到无权限访问页面


微信截图_20220514184323.png


1.2 视觉权限


啊敏同学:那按钮权限呢?如何处理


🌲:同样需要依赖到资源编码,然后通过自定义指令,比如v-perms来控制,指令源码可点击👉指令控制 如下图所示是一个按钮的具体使用


微信截图_20220514184332.png


至于v-perms指令我们是如何给每个子应用复用,通过门户主应用去注入到子应用生命周期, 子应用接收如下👇


微信截图_20220514184340.png


啊敏同学:树酱,你上面提及的按钮权限控制是基于

相关文章
|
数据采集 移动开发 前端开发
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下
801 0
|
6月前
|
缓存 前端开发 JavaScript
前端项目重构的一些思考和复盘
前端项目重构的一些思考和复盘
143 1
|
缓存 前端开发 应用服务中间件
微前端落地系列-复盘(下)
前沿:哈喽大家好,我是树酱🌲,好久不见。本文主要为了做复盘,在去年基于qiankun微前端架构的门户建设中,遇到的一些问题,可能你会认为:“哇,这也算问题吗?太简单了吧”。主要是分享在我认知体系内是如何解决的,如果对其中一些解决方案有更好的建议,记得在评论区留言~
254 0
微前端落地系列-复盘(下)
|
14天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
14天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0
|
14天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
14天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
14天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
14天前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
2月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架