ant design pro 动态修改路由
2019, Oct 22
以下ant design pro 用adp简称
问题描述：
-
技术选型
使用react，ts，ant design pro。 -
所遇问题
从官方issues中看出，在adp这个框架里，路由的定义需要在config/config，ts里确定，因为它使用了umi（企业级react 应用框架），umi需要这个列表来使用react-route-dom，构建路由表，但不是所有用户都能进入特定的页面，这是需要鉴权的。对此adp在路由数组里的路由对象里用authority（array）字段表示能进来的用户，如['super_admin]是只有super_admin能进，[]则无人能进，不设置则所有人都能进，然后umi使用Router字段指定用于鉴权的高阶组件。
这里带来了问题。由于资源、角色、人员都是后台添加的，所以角色名都是不固定的，权限也细化到了接口，没办法在一开始就在authority里写入，对应的角色名。所以需要改写。 -
解决方法
- 配置config
在config/config.ts里的routes定义路由列表时，路由对象不要authority字段（意味该路由不需要鉴权）。
- 请求权限列表，拉取权限信息
注意上图中定义Routes字段的组件BasicLayout，当代码进入到BasicLayout后会先进入用于鉴权的高阶组件，再进入子路由。因此要在进入子路由之前请求权限信息，之前我是写在BasicLayout里，后来发现这样写并不是很好，于是提升到了SecurityLayout。
在SecurityLayout里，用一个变量loading（boolean）限制页面渲染，useState函数参数里执行dispatch，触发redux的方法请求，将请求结果缓存起来，页面内则有一个useEffect(只会因components， authList变化而触发的hook)将处理过的权限数组（将有权限的的路由页面对象的authority字段设为这个人的角色名数组，如[‘super_admin’]，没有权限的则设置成[]），按照路由的格式unshift到页面的route里，处理好route后则设置loading为true，渲染子组件，这时候，子组件已经有了正确的authority了。
- 配置config