ant design pro 权限管理

原创

于 2020-10-28 11:03:00 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #前端

本文探讨了Ant Design Pro框架中的权限管理模块，重点解析了`config/config.js`、`router.config`、`Authorize`组件及其相关逻辑。通过设置路由属性实现权限控制，`Authorize`组件用于判断用户权限并决定是否展示页面。`CheckPermissions`方法为核心，检查用户权限与页面准入权限的匹配情况。

前言

这段时间一直用ant design pro这个框架开发项目，其中最重要的模块之一应该就是其自带的权限控制功能，现在也来谈谈我对这个模块代码的理解。随着框架的升级，代码部分可能有所改动，但其实现思路和方法应是没有大的变动。

权限管理

config/config.js

首先可以看到只需在config文件中进行路由配置，即能访问对应路由页面

export default {
   
   
  ...
  routes: [
    {
   
   
      path: '/user',
      component: '../layouts/UserLayout',
      routes: [
        {
   
   
          name: 'login',
          path: '/user/login',
          component: './user/login',
        },
      ],
    },
  ...
}