Ant Design Pro内容和菜单权限设置

讲真的关于Ant Design Pro最新版本的资料在网上就很少了，对于小编这样的小白学起来真的很吃力，由于公司有个项目用这个框架做的，所以又不得不学。

提出的需求是权限管理，具体是不同用户在登录后拥有不同的菜单和内容。

说实话小编刚实习，项目就没接触几个，作为一名光荣的前端对于这个权限这个就接触的更少了，之前只用php做过权限，不过那是连接的数据库有明确的用户权限等级属性，将那个属性拿出来用就可以了。接触像Ant Design Pro这样完整的项目实在不知道从哪里入手。
首先进入官网查阅文档：https://pro.ant.design/docs/getting-started-cn
通过官网文档的开始使用我们能直接搭建好一个完整的Ant Design Pro项目。下载好项目后 npm install下载完成所有依赖。
这时候查看官网就有文档就有权限的使用：https://pro.ant.design/docs/authority-management-cn

菜单权限

注：菜单配置是在config/router.config.js文件里面，因为新版的资料比较少我怕一些小伙伴找不到。

这里是菜单的权限，在authority里面添加你准许显示的权限就行了，这里是admin的权限，那么我们用user用户登录时这个菜单就会隐藏了。

内容权限

内容权限这个其实也不难，主要的问题是找不到资料，这点很难受。
首先去官网看Authorized权限的时候：https://pro.ant.design/components/Authorized-cn/ 就会说到一个引入

1.这种引入方式它让我们参照独立使用Pro组件，点进去我们会看到下面这个页面

2.这里提到说是用来脚手架的会有一套默认的业务组件，Ok那我们看看这套组件到底有些什么吧，这里我们点击pro自带组件那个连接。点进去我们可以看到下面的内容

3.这里包含一些，我们清楚看到有Authorized权限这个组件。那么我们千万不要再去下载ant-design-pro的依赖了，这里下载是会报错的，我们直接回到刚才的Pro自带组件的位置我们看到：

4.点击新增组件，进去后上面的我们先不管，找到最下面的使用

5.它让我们像这样引入我们就这样引入Authorized，

6.之后我们就可以使用了，我们再引入一个组件Alert

7.然后我们来使用权限, 先创建

8.然后我们在 render() 方法里面return

注：这里的使用是：用Authorized包裹着需要权限才能显示的内容，noMatch是权限未通过后的提示内容，当不加noMatch内容自动隐藏

最后：我们能得到内容

9.我们退出当前用户，用user用户登录，发现显示内容一样，那我们要的不是这样写死的权限显示，我们希望的是不同权限用户得到的内容不一样。这里就要用到一个获取权限的函数getAuthority，这个函数在src/utils/authority.js中

10.同样我们再文件中引入，引入的方式根据文件位置的不同而不同。

11.然后我们使用

然后其他的内容不变，我们再来看结果

函数的方式

这里我们使用的是authority={[‘admin’]这种方式限制用户权限，还可以使用函数的方式


这样我们也能限制用户的权限，当然函数内的内容就可以根据自己的需要来了。
好了今天的分享就到这里，如果小编有什么错误欢迎大家指出。