使用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自带的权限管理方式来处理权限问题的方法。

相关推荐
喵叔哟4 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django