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

三种权限管理的方法:

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

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

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

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

umi的特点:

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

详细过程:

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

解决方法有两种:

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

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

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

之后在src/access.ts中:

javascript 复制代码
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

javascript 复制代码
//如果证明存储在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 (
        <Access
        accessible={凭证是否正确}
        fallback={凭证不正确时显示的内容}
        >
        凭证正确时显示的内容
        </Access>
    )
}

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

相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端