江阴做网站公司,门户网站平台建设方案,张家界网站建设app,手机网站开发合同范本三种权限管理的方法#xff1a;
在做后台管理系统时#xff0c;难免会使用到权限管理#xff0c;权限管理方式有三种#xff0c;分别是#xff1a;路由、守卫、后端配合。
路由#xff1a;通过动态路由#xff0c;根据登录人员不同注册不同的路由#xff0c;直接让没…三种权限管理的方法
在做后台管理系统时难免会使用到权限管理权限管理方式有三种分别是路由、守卫、后端配合。
路由通过动态路由根据登录人员不同注册不同的路由直接让没有权限的人员直接看不到需要权限的页面。
守卫守卫是一种用于控制路由访问的机制。守卫可以在用户导航到特定路由之前、之中或之后执行特定的逻辑比如权限验证、数据预加载等。如果条件不满足守卫可以阻止导航并进行重定向。
后端配合后端可以对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函数AccessuseAccess
在需要添加权限的组件页面内使用。使用过程及方法
第一想办法存储用来区分有没有权限的的证明存在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自带的权限管理方式来处理权限问题的方法。
