umi+react动态权限控制

最新推荐文章于 2025-06-25 14:20:24 发布

前端小峰

最新推荐文章于 2025-06-25 14:20:24 发布

阅读量4.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react+ts 文章标签： react typescript

本文链接：https://blog.csdn.net/Shaoyouiqng/article/details/109219288

本文介绍了在umi+react环境下实现动态权限控制的两种方法。第一种通过app.ts的patchRouter内置函数处理，获取权限接口并在路由处理中应用。第二种方法结合app.ts和access.ts，利用路由的access参数进行权限控制。此外，还讨论了如何添加公共地址直接跳转至welcome页面的两种实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚换了一家公司，一直以来都没有更新，sorry,最近一直在学习新的前端技术。今天我要分享的是umi权限控制，目前给到了dva方法都比较好，但是每个公司的路由权限控制也是不一样的，所以要根据具体的项目情况进行分析

方法1：app.ts的内置函数patchRouter处理

app.ts
首先，我们在内置方法render去拿权限接口

export async function  render(oldRender) {
   
   
  const authRoutesResult = await getUserAuth();  //拿权限（getUserAuth）是权限接口，里面的参数就是数组包对象的方式
  window.oldRender = () => {
   
   
    if (authRoutesResult && authRoutesResult.ret.code === 'SUCCESS') {
   
   
      authRoutes = authRoutesResult.data;  //这个authRoutes放在全局定义下
    } else {
   
   
      oldRender();
    }
    oldRender();
  }
  if (window.oldRender) {
   
   
    window.oldRender();
  }
}

下一步在内置的patchRoutes函数根据权限对路由进行处理

export function patchRoutes({
   
   routes}) {
   
   
  authMap = authRoutes.reduce((total:any, next: any) => {
   
   
    return ({
   
   ...total, [next.url]: true})  //authMap全局声明
    // 把权限通过健值对的方式存起来，这个根据个人接口情况去处理
  }, {
   
   '/welcome':true, '/':true, '/login':true})
  // 这后面这个是默认每个权限都有的路由
  routes[0].routes = filterRoute