Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



3Years-10 依据用户的角色权限动态渲染菜单

2018-06-11 » 没填完的坑 / 3Years , Tutorial

项目地址:https://github.com/PassionZale/3Years


首先,ACL 有很多种实现方式,例如依据资源来做控制、依据路由来做控制、按钮级别单独纬度的控制等等。

3Years 中采用的是依据资源来做控制。


对于服务端来讲,所有红框圈出的名称即为资源,它们都对应着某个控制器,在视图上它们便对应着某个一级菜单。

系统设置举例说明,我定义了一个 System 的控制器,其中包含了针对“用户”、“角色”、“权限”三个模型的请求处理:

此时,我们便可以将 System 赋予某个或多个角色,那么该角色便拥有了系统设置资源(System)下的接口访问权限,即这个角色被允许操作“用户”、“角色”、“权限”这三个模型。


客户端在处理权限列表,在根据权限,动态生成菜单,可以分为如下几个步骤:

1. 获取用户信息;2. 渲染 routes;3. 使用 vue-router 的 addRoutes() 增加 routes.


获取用户信息

当用户登录,服务端校验成功后,客户端通过相应接口,拉取当前用户的角色及权限列表,并初始化 user state


渲染 routes


上述步骤中,我们将整个系统的路由分为了两大部分:需要动态添加、不需要动态添加。

不需要动态添加或权限判断的路由,常常为“登录”、“注销”等路由;

需要动态添加的,则依据项目的业务进行设置。

请务必将 { path: '*', redirect: '/404' } 添加至最后!

展开选填信息