使用umi作为模板如何实现权限管理

ops/2024/10/18 19:27:51/
三种权限管理的方法:

在做后台管理系统时,难免会使用到权限管理,权限管理方式有三种,分别是:路由、守卫、后端配合。

路由:通过动态路由,根据登录人员不同注册不同的路由,直接让没有权限的人员直接看不到需要权限的页面。

守卫;守卫是一种用于控制路由访问的机制。守卫可以在用户导航到特定路由之前、之中或之后执行特定的逻辑,比如权限验证、数据预加载等。如果条件不满足,守卫可以阻止导航并进行重定向。

后端配合:后端可以对token解析后进行判断,判断该成员是否可以获取该数据。

umi的特点:

umi的特点就是当项目初始化时,路由就已经注册过固定了,因此后期使用动态路由无法再根据登录人员进行路由的动态注册,因此只能使用守卫或者后端人员配合。但是,umi中提供了一个专门用于解决此问题的方法:权限 (umijs.org)

详细过程:

注意:解决方法仅仅是自己的理解,并通过测试可以实现相应功能。实际应用可能并非如此。

解决方法有两种:

第一:使用access配合后端来解决:

在routes.ts中,给需要添加权限管理的路由添加access属性:

{path:"/page1",name;"page1",component:"/Page1",access:"admin"//该字段可以为任意值,保证前后值相同即可。
}

之后在src/access.ts中:

export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {//定义一个access函数,接收一个参数initialState,该参数可以是包含 currentUser 属性的对象或未定义。const { currentUser } = initialState ?? {};//从 initialState 对象中解构出 currentUser 属性。如果initialState未定义,则使用空对象作为默认值。return {admin:currentUser && currentUser.access === 'admin',//当currentUser 存在,并且currentUser中属性access的值为admin时,admin为true。这里面要注意:属性admin要和前面个routes.ts中access的值相同,值中的admin要和下一块代码返回值中的access属性相同。};
}

 最后通过与后端协商,在api.ts中的方法currentUser的返回值中加上access属性,并且根据上方代码,有权限的人员登录时返回的access属性必须要是"admin",其他人任意值。

方法二:使用umi内置的组件和Hook函数:Access+useAccess

在需要添加权限的组件页面内使用。使用过程及方法:

第一:想办法存储用来区分有没有权限的的证明(存在localStorage、sessionStorage、session或者调用接口从后端获取都可以);

第二:引入并使用useAccess

//如果证明存储在access.ts中,那么可以通过引入Hook函数useAccess来解决,如果没有存在access.ts中,那么下方代码中和useAccess有关的都可以删除。
import { useAccess, Access } from '@umijs/max';//引入Hook函数和Access组件
export default page1()=>{const access = useAccess();if(!access.admin){//将证明存储在access.ts中可以这么使用//当access.ts中返回值admin为false,即没有权限查看时执行该处代码,可以进行重定向或展示其他内容,举个例子:return <div>无权限查看</div>}else{//本页面原本应该返回的代码}if(证明是否正确){//证明没有存储在access.ts中可以这么使用//正确操作}else{//失败操作}//另外就是比较简单的写法,使用umi自带的Access组件:return (<Accessaccessible={凭证是否正确}fallback={凭证不正确时显示的内容}>凭证正确时显示的内容</Access>)
}

这就是我理解的使用umi自带的权限管理方式来处理权限问题的方法。


http://www.ppmy.cn/ops/86695.html

相关文章

抖音电商下半年将继续加大消费者体验投入,让用户以好价买好货

日前&#xff0c;抖音电商在北京举办了内部全员沟通会&#xff0c;会上公布了上半年的各项业务进展与数据指标&#xff0c;确定了下半年的工作目标。记者获悉&#xff0c;抖音电商总裁魏雯雯在会上表示&#xff0c;全员要进一步加强协作&#xff0c;采取更精细化的策略&#xf…

Clickhouse 生产集群部署(Centos 环境)

文章目录 机器环境配置安装 JDK 8安装 zookeeperClickhouse 集群安装rpm 包离线安装修改全局配置zookeeper配置Shard和Replica设置image.png添加macros配置启动 clickhouse启动 10.82.46.135 clickhouse server启动 10.82.46.163 clickhouse server启动 10.82.46.218 clickhous…

心跳机制详解

1、什么是心跳机制&#xff1f; 心跳机制出现在TCP长连接中&#xff0c;客户端和服务端之间定时发送一种特殊的数据包通知对方还在线&#xff0c;以确保TCP连接地可靠性&#xff0c;有可能TCP连接由于某些原因&#xff08;例如网线被拔了&#xff0c;突然断电&#xff09;导致…

Go语言教程(一看就会)

全篇文章 7000 字左右&#xff0c; 建议阅读时长 1h 以上。 Go语言是一门开源的编程语言&#xff0c;目的在于降低构建简单、可靠、高效软件的门槛。Go平衡了底层系统语言的能力&#xff0c;以及在现代语言中所见到的高级特性。它是快速的、静态类型编译语言。 第一个GO程序…

数字看板:跨行业需求下的创新与升级

在当今这个数据驱动的时代&#xff0c;数字看板作为信息展示与决策支持的重要工具&#xff0c;正逐步渗透到各行各业之中。从智慧城市到智能制造&#xff0c;从金融分析到医疗健康&#xff0c;数字看板以其直观、动态、高效的特点&#xff0c;成为了连接数据与决策者的桥梁。本…

【MySQL进阶之路 | 高级篇】显式事务和隐式事务

使用事务有两种方式&#xff1a;显式事务和隐式事务。 1. 显式事务 步骤1&#xff1a; START TRANSACTION或者BEGIN&#xff0c;作用是显式开启一个事务。 START TRANSACTION语句相较于BEGIN特别之处在于&#xff0c;后面能跟几个修饰符。比如&#xff1a; READ ONLY&…

Vue项目中优化性能的方法

在Vue项目中&#xff0c;优化性能是一个持续的过程&#xff0c;涉及到多个方面。以下是一些常见的优化策略&#xff1a; 组件拆分&#xff1a; 将大型组件拆分为更小、更可管理的子组件。使用v-if和v-else来条件渲染组件&#xff0c;避免渲染不必要的组件。 使用v-show和v-if&…

2023河南萌新联赛第(二)场 南阳理工学院

A. 国际旅行Ⅰ 题目&#xff1a; 思路&#xff1a; 因为题意上每个国家可以相互到达&#xff0c;所以只需要排序&#xff0c;输出第k小的值就可以了。 AC代码&#xff1a; #include<bits/stdc.h> #define int long long #define IOS ios::sync_with_stdio(0);cin.tie…