antd pro框架用户权限的简单配置和使用

这里只介绍antd pro框架Authorized的最简单的使用
高级些的用法参考以下文章
Ant Design Pro 鉴权/ 权限管理
ant design pro 配置动态菜单、权限

对权限的写入

一般来说，我们对于权限的写入都是在登录成功之后进行调用

1. 所以现在登录页面导入setAuthoried方法

2. 调用方法进行写入权限（默认的权限只有两种admin和guest，我这里也只说这两种)

   import { setAuthority } from '@/utils/authority';
   setAuthority('guest');
   

3. 然后你就会在localStorage中能够发现权限为guest
   

左侧菜单路由根据权限的显示和隐藏

1. 在config文件中对路由进行配置Authorized属性
   先设置为guest权限
   
   可以看到能够显示出油品管理这个模块
   
   接下来修改为admin
   
   然后在左侧菜单就会显示不出来
   
   ps：这里如果只是简单的对于不同的角色控制不同的路由菜单的话，那么可以不限于admin和guest角色，可以自定义角色，比如说user、test。。。都可以

局部组件的权限控制

1. 导入权限组件

   import { Form, Input, Button, Select } from 'antd';
   import React from 'react';
   import Authorized from '@/components/Authorized/Authorized';
   const Demo = () => {
     return (
       <div>
         <Authorized authority={['admin']}>权限是管理员</Authorized>
         <Authorized authority={['guest']}>权限是普通用户</Authorized>
       </div>
     );
   };
   
   export default Demo;
   

   效果如下
   
   显示不了的就会报一个403的错误页面，说你没有权限查看这个页面或组件

   如果你不想显示出这个页面可以到/src/components/Authorized/Authorized.tsx这个文件进行配置