UMI 使用@umijs/plugin-access插件进行权限控制失效问题

如果你使用umijs创建了项目，并根据文档https://umijs.org/docs/max/access配置了路由权限控制但依然无效，那么可以看看是不是遇到了同样的问题。

路由配置

要能控制路由，首先要在需要进行路由控制的每一项中增加access字段， access的值是方法名（normalRouterFilter），插件会通过access字段的值找到该方法，并通过执行该方法查看用户是否有权限访问这个路由。

image.png

既然要通过该方法（normalRouterFilter）获取权限，那么就需要让插件找到它。接下来就要在src下创建access.ts文件（创建项目的时候缺省会有），根据文档将normalRouterFilter方法在该文件导出，插件会在遍历每一个路由项的时候，将路由信息传给该方法，该方法判断用户是否有权限访问这个路由来返回true或者false，如下

image.png

至此一个路由级别的权限控制就算完成了，一切顺利的话不同权限的用户看到的菜单应该是不一样的，即使有路由地址，没有权限也只能看到403页面。BUT理想往往是丰满的，现实是很骨感，配置完以后一点效果都没有。

解决

为了解决这个问题，我一般都是从否定自己开始

1. 怀疑自己写得是否有问题，眼睛看花了也没发现有问题
2. 怀疑用umi搭建的时候有没有@umijs/plugin-access这个插件，看了一下package-lock.json和node_modules都有
3. 怀疑normalRouterFilter插件没有调用，debugger了一下，方法调了，返回值也是正确的

一路下来，冥冥中觉得文档肯定有什么没告诉我，google百度一圈都没有结果，最后在issue里找到了https://github.com/umijs/umi/issues/5747（灰常感谢）

如果按照官方文档一路下来都没有成功，请先到app.tsx文件里看一下自己有没有写过一段这样的代码https://v3.umijs.org/zh-CN/docs/runtime-config#rootcontainerlastrootcontainer-args

image.png

如果有的话，请找到App这个组件，这个组件一般是用来包裹根组件用的，如下图。children就是rootContainer提供的根组件，

image.png

image.png

至此权限控制路由的效果才出来，不得不吐槽一下umi的文档，在rootContainer（https://v3.umijs.org/zh-CN/docs/runtime-config#rootcontainerlastrootcontainer-args）和权限控制（https://umijs.org/docs/max/access）里都没有提及这个会让权限失效的问题，也很难让人将路由和rootContainer关联起来。

rootContainer提供了routes参数，如果使用rootContainer来包一层根组件，又忘记把routes传给根组件，那么权限的控制就会在这里失去作用。