基于ant-pro脚手架的权限控制

本周末花了两天对权限系统做了简单梳理，大致感悟如下：

权限系统的大致分类

• 菜单权限

• 路由权限（ps:页面权限）

• 功能权限

权限实现

对于权限系统，对于菜单就是每一个菜单对应一个权限的code码，对于路由也一样，路由权限可以看作就是菜单权限，毕竟是菜单控制页面的显示。最后最繁琐的便是功能权限，因为要细化到每个功能点和部分代码逻辑。所以这部分是醉耗时的，但是原理一样都是通过code码去控制。这里和后端约定的格式其实就是一个数组，里面存放的就是当前用户拥有的权限code。为什么要约定数组？这是因为数组的格式对于前端处理起来直接，我们只需要关注care的code是否在数组中就可以了。

具体实现

• 菜单权限

*   第一步

menu.js.png

对于菜单权限，数据结构物非就是这样，由于我们对每个菜单的code都已经和后端约定好并且已知，所以我们要做的就是手动给每个菜单加code，到这里算是第一步完成！

menu.js.png

*   第二步 
    由于权限是放在用户登录之后完成获取的，所以在进行页面跳转时应该只是在整个应用启动时调用一次，仅仅一次！除非手动刷新。这里在获取时，我们使用的是在加载左侧菜单时调用一次，然后将获取的权限list可以结合具体的menus使用hideInMenu属性进行控制。

BasicLayout.js.png

    利用遍历menus的方法就可以对菜单动态添加hideInMenu属性，达到效果。

menu.js.png

    ⚠️如果热更新页面，左侧菜单不见了，kennel好似SideMenu文件夹中的index.js的this.menus搞的鬼，因为脚手架里是放在了constructor里面初始化的，这里可以改为componentWillReceiveProps再更新一次this.menus的数据。

• 路由权限

*   对路由添加code码，使用routerData属性数据进行遍历，就可以对url的无权限路由进行拦截到403页面。

图片.png

*   这里要进行拦截，就需要做一些额外的配置。使用dva/router的Redirect组件进行重定向即可。

BaseLayout.js.png
BaseLayout.js.png

    这样对可以对无权限的路由就可以拦截了到403

• 功能权限

*   功能权限对于组件的控制，只需要在最外层包裹一层组件，里面传入当前组件的code和权限list就可以。

（ps：这里也可以使用npm包,npm i cs_author -S）安装好以后，里面需要传两个参数，当前要控制组件的code码和权限list，使用如下：

npm组件.png 组件.png

外层组件封装好就是这样的。

*   对于js逻辑的控制，就需要针对特定的逻辑去控制，控制的方式一样，都是通过code在权限的list中是否存在控制是否去发请求。

这种方式对于权限控制已经全部覆盖了，所以不说造轮子，但可以画轮子了。