基于ng-alain用户登录及权限相关
作者：互联网
权限：基于权限点来做（菜单权限、按钮权限）
先来说一下整个权限这块的整体思路：
- 权限管理：每个菜单及按钮都会有响应的权限代码。数据类型为树结构。
- 菜单管理：每个菜单会绑定一些权限点。（将新建的菜单和权限点做个绑定）
- 角色管理：角色创建之后会也会给角色赋予一些权限点。
- 人员管理：给人员分配角色。
以上就是后台系统对权限的管理。
当时后台这么设计的时候，我提出了疑问：菜单管理绑定的权限点为什么是一些，每个菜单绑定的不应该是对应的唯一的一个么？原因是菜单下面还有按钮级别的权限点需要进行绑定。
角色和人员就不用细说了，后台管理基本都这么做。
但是至于设计上，出于各种因素的权衡考虑，每个人和每个团队都有不一样的设计。
登录之后：后台会给我们什么？我们需要怎么去做？
回答是：登录后，后端会把整个菜单返回给我们，菜单带有相应权限点。同时也会把该用户拥有的所有权限点给我们。 我们需要根据返回的菜单和权限 来做菜单和按钮权限。接下来就是具体实现：我们到底需要怎么去处理呢？对于刚使用ng-alain的我，摸着文档前进还摔了不少跤......
菜单权限：
尝试在startup.service.ts中使用 this.aclService.setRole(['role4']); 设置角色 然后在根路由routes-routing.module.ts 中设置 路由的角色
问题在于：路由的角色是动态配置的，难道后台系统调整前端代码就得修改？并且角色可以是多个
尝试解决：使用权限点
在startup.service.ts中使用 this.aclService.setAbility(res.auth);设置权限点
然后在根路由routes-routing.module.ts 中设置路由权限点
问题在于：这个是针对模块，对于每个路由都应该有相应的权限点
最终解决：在每个子路由中都设置相应的权限点
在startup.service.ts中使用 this.aclService.setAbility(res.auth);设置权限点
然后在根路由routes-routing.module.ts 中设置ACLGuard
{
path: 'order',
loadChildren: () => import('./order/order.module').then(m => m.OrderModule),
canActivateChild: [ACLGuard]
}
最后在相应模块的每个路由中设置相应的权限点
解决了以上问题：
之前一直困扰的路由拦截问题也就解决了。 每个路由都有相应的权限点，根据权限点拦截，就不存在打开了没有权限的页面
解决了路由拦截问题：接下来的问题就是如何过滤菜单（后台会把所有的菜单返回-菜单带有相应权限点 并且会返回该用户对应的所有权限点）
首先想到的是通过用户对应的权限点去和整个菜单做比对，将权限点匹配的菜单过滤出来就是展示的菜单。 接着acl是不是提供了相关配置。 以下是acl提供的相关配置总结： 第一步：menu中的acl参数 ，只要在 menu中设置acl参数，如果是字符串，acl会解析成 角色 第二步：更改menu中的acl参数 为 {ability:["main"]} 会被解析成权限点 第三步：在startup.service.ts中已经设置了权限点 this.aclService.setAbility(res.auth); acl会根据用户拥有的权限点过滤菜单。
总结：
1. menu接口中设置acl。 acl:{"ability": ["system"]} 2. menu接口返回 auth:[] 。用户拥有的权限点 3. 在 startup.service.ts中，设置菜单和权限点 this.menuService.add(res.menu); this.aclService.setAbility(res.auth); 4. 在相应路由中设置权限点。 比如：在auth-routing.module.ts中设置 { path: 'user', component: AuthUserComponent, data: { guard: { ability: ['auth-user'] } } } 以上配置实现 菜单控制及路由拦截 按钮权限: <button acl [acl-ability]="'order-list'">测试权限点</button>标签：菜单,alain,ts,ng,设置,权限,路由,acl 来源： https://www.cnblogs.com/aries-web/p/16338149.html