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

三种权限管理的方法:

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

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

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

后端配合:后端可以对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.mzph.cn/pingmian/50124.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL 数据库 安装

1、官网下载 起源与发展&#xff1a;PostgreSQL最初起源于加州大学伯克利分校的Postgres项目&#xff0c;该项目始于1986年&#xff0c;并一直演进到1994年。在1995年&#xff0c;Postgres项目增加了SQL翻译程序&#xff0c;并更名为Postgres95。随后&#xff0c;在1996年&…

Linux:core文件无法生成排查步骤

1、进程的RLIMIT_CORE或RLIMIT_SIZE被设置为0。使用getrlimit和ulimit检查修改。 使用ulimit -a 命令检查是否开启core文件生成限制 如果发现-c后面的结果是0&#xff0c;就临时添加环境变量ulimit -c unlimited&#xff0c;之后在启动程序观察是否有core生成&#xff0c;如果…

Linux网络:传输层协议TCP(一)

目录 一、TCP协议的定义 二、确认应答机制ACK 三、序号、确认序号 四、超时重传机制 一、TCP协议的定义 TCP 全称为 "传输控制协议(Transmission Control Protocol"). 人如其名, 要对数据的传 输进行一个详细的控制; TCP 协议段格式 • 源/目的端口号: 表示数据…

GO发票真伪批量查验方法、数电票查验接口

“教”给机器标注数据的正确率就决定了人工智能判断的正确率。翔云人工智能开放平台的OCR产品经过我们的开发人员精心调“教”&#xff0c;识别率高、识别速度快。 发票&#xff0c;是发生的成本、费用或收入的原始凭证。于公司来说&#xff0c;发票主要是公司做账的依据&…

解决Windows 11更新错误0x800f081f的详细指南

在尝试更新Windows 11时&#xff0c;用户可能会遇到各种错误代码&#xff0c;其中之一是0x800f081f。这个错误通常与Windows更新组件或系统文件的损坏有关。本文将提供解决这一特定错误的详细步骤&#xff0c;并解释可能的原因。 错误代码0x800f081f概述 错误代码0x800f081f指…

【Devops系统】如何构建Devops系统

什么是Devops DevOps是一种软件开发和文化实践&#xff0c;它强调软件开发&#xff08;Dev&#xff09;和IT运营&#xff08;Ops&#xff09;之间的紧密合作与沟通。DevOps的目标是通过自动化软件的集成、测试、部署和监控来简化流程&#xff0c;从而加快软件交付的速度&#x…

pythonGame-实现简单的贪食蛇游戏

通过python简单复现贪食蛇游戏。 使用到的库函数&#xff1a; import pygame import time import random 游戏源码&#xff1a; import pygame import time import randompygame.init()white (255, 255, 255) yellow (255, 255, 102) black (0, 0, 0) red (213, 50, 80…

代码随想录算法训练营第四十四天|99.岛屿数量 100.岛屿的最大面积

99.岛屿数量 深搜 class Solution:def numIslands(self, grid: List[List[str]]) -> int:def dfs(i, j):if not 0 < i < m or not 0 < j < n or grid[i][j] "0":returngrid[i][j] "0"for x,y in (i1,j),(i-1,j),(i,j1),(i,j-1):dfs(x,y)…

新版海螺影视主题模板M3.1全解密版本多功能苹果CMSv10后台自适应主题

苹果CMS2022新版海螺影视主题M3.1版本&#xff0c;这个主题我挺喜欢的&#xff0c;之前也有朋友给我提供过原版主题&#xff0c;一直想要破解但是后来找了几个SG11解密的大哥都表示解密需要大几百大洋&#xff0c;所以一直被搁置了。这个版本是完全解密的&#xff0c;无需SG11加…

Oracle对数据库行和数据库的监控

前言&#xff1a; Oracle对表的监控分为数据行修改DML的监控、对表的DDL监控 1、对表的DML监控&#xff08;数据的增删改&#xff09; -- 创建测试表 create table tab_test01( id varchar2(100) default sys_guid(), name varchar2(100), insert_date date default sysdate…

学习日记:数据类型2

目录 1.转义字符 2.隐式类型转换 2.1 强制类型转换 2.2 不同类型间赋值 3.运算符 表达式 3.1 算术运算符 3.2 算术运算优先级 3.3 赋值运算 3.3.1 不同类型间混合赋值 3.4 逗号运算 4.生成随机数 5. 每日一练 1.转义字符 \n 表示换行 \t …

基于JSP、java、Tomcat三者的项目实战--校园交易网(1)-项目搭建(前期准备工作)

这是项目的初始页面 接下来我先写下我的初始项目搭建 技术支持&#xff1a;JAVA、JSP 服务器&#xff1a;TOMCAT 7.0.86 编程软件&#xff1a;IntelliJ IDEA 2021.1.3 x64 首先我们打开页面&#xff0c;准备搭建项目的初始准备 1.New Project 2.随后点击Next&#xff0c;勾…

Easy es问题总结

官网教程&#xff1a;https://www.easy-es.cn/pages/ac41f0/#settings 一 测试项目 1 pom <dependencies><!-- 排除springboot中内置的es依赖,以防和easy-es中的依赖冲突--><dependency><groupId>org.springframework.boot</groupId><artifa…

【Golang 面试基础题】每日 5 题(七)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

脊髓小伙伴必看!超全维生素补给站,助力你的每一天活力满满✨

今天咱们来聊聊一个既严肃又暖心的话题——脊髓损伤后的维生素大补帖&#xff01;&#x1f31f; 记住&#xff0c;身体是革命的本钱&#xff0c;补充对的维生素&#xff0c;就是给自己的小宇宙加油哦&#xff01;&#x1f680; 首先&#xff0c;维生素D小太阳&#x1f31e;来啦…

Nestjs使用Redis的最佳实践

前几天在项目中有用到Redis JWT实现服务端对token的主动删除(退出登录功能)。故此介绍下如何在Nestjs中使用Redis&#xff0c;并做下总结。 知识准备 了解Redis - 网上很多简介。了解Nestjs如何使用jwt生成token - 可移步看下我之前的文章 效果展示 一、mac安装与使用 示…

在Webpack中,常见的loader有哪些?

在Webpack中&#xff0c;有许多常见的Loader用于处理不同类型的文件。以下是一些常见的Loader及其主要作用&#xff1a; babel-loader&#xff1a;用于将ES6/ES7等新版本的JavaScript代码转换为向后兼容的旧版本JavaScript代码&#xff0c;以确保在不支持新特性的浏览器…

【矩阵微分】在不涉及张量的前提下计算矩阵对向量的导数并写出二阶泰勒展开

本篇内容摘自CMU 16-745最优控制的第10讲 “Nonlinear Trajectory Optimization”。 如何在不涉及张量运算的前提下&#xff0c;计算矩阵对向量的导数并写出二阶泰勒展开 在多维微积分中&#xff0c;计算矩阵对向量的导数和二阶泰勒展开是一项重要的任务。本文将介绍如何在不涉…

使用命令快速删除项目中的node_modules

描述 直接调用了系统自带的命令行工具&#xff0c;无需额外安装任何第三方库或工具。 同时&#xff0c;这些命令经过优化&#xff0c;能够快速处理大量文件&#xff0c;从而实现快速删除。 步骤 1、进入项目文件夹&#xff1b; 2、如果是Mac/Linux 环境下&#xff0c;执行&a…

php--序列化与反序列化

&#x1f3bc;个人主页&#xff1a;金灰 &#x1f60e;作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持&#xff01;❤️ &#x1f34a;易编橙终身成长社群&#…