讲真的关于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’]这种方式限制用户权限,还可以使用函数的方式
这样我们也能限制用户的权限,当然函数内的内容就可以根据自己的需要来了。
好了今天的分享就到这里,如果小编有什么错误欢迎大家指出。