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

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

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

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

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

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

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

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

获取用户信息

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

渲染 routes

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

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

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

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