项目地址:https://github.com/PassionZale/3Years
首先,ACL 有很多种实现方式,例如依据资源来做控制、依据路由来做控制、按钮级别单独纬度的控制等等。
3Years 中采用的是依据资源来做控制。
对于服务端来讲,所有红框圈出的名称即为资源,它们都对应着某个控制器,在视图上它们便对应着某个一级菜单。
拿系统设置举例说明,我定义了一个 System
的控制器,其中包含了针对“用户”、“角色”、“权限”三个模型的请求处理:
此时,我们便可以将 System
赋予某个或多个角色,那么该角色便拥有了系统设置资源(System)下的接口访问权限,即这个角色被允许操作“用户”、“角色”、“权限”这三个模型。
客户端在处理权限列表,在根据权限,动态生成菜单,可以分为如下几个步骤:
1. 获取用户信息;2. 渲染 routes;3. 使用 vue-router 的 addRoutes()
增加 routes.
获取用户信息
当用户登录,服务端校验成功后,客户端通过相应接口,拉取当前用户的角色及权限列表,并初始化 user state
。
渲染 routes
上述步骤中,我们将整个系统的路由分为了两大部分:需要动态添加、不需要动态添加。
不需要动态添加或权限判断的路由,常常为“登录”、“注销”等路由;
需要动态添加的,则依据项目的业务进行设置。
请务必将 { path: '*', redirect: '/404' } 添加至最后!