本文主要是介绍基于ng-alain用户登录及权限相关，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

权限：基于权限点来做（菜单权限、按钮权限）

先来说一下整个权限这块的整体思路：

1. 权限管理：每个菜单及按钮都会有响应的权限代码。数据类型为树结构。
2. 菜单管理：每个菜单会绑定一些权限点。（将新建的菜单和权限点做个绑定）
3. 角色管理：角色创建之后会也会给角色赋予一些权限点。
4. 人员管理：给人员分配角色。

　　 以上就是后台系统对权限的管理。

　　 当时后台这么设计的时候，我提出了疑问：菜单管理绑定的权限点为什么是一些，每个菜单绑定的不应该是对应的唯一的一个么？原因是菜单下面还有按钮级别的权限点需要进行绑定。

　　 角色和人员就不用细说了，后台管理基本都这么做。

　　 但是至于设计上，出于各种因素的权衡考虑，每个人和每个团队都有不一样的设计。

登录之后：后台会给我们什么？我们需要怎么去做？

回答是：登录后，后端会把整个菜单返回给我们，菜单带有相应权限点。同时也会把该用户拥有的所有权限点给我们。 　　　　我们需要根据返回的菜单和权限 来做菜单和按钮权限。    

接下来就是具体实现：我们到底需要怎么去处理呢？对于刚使用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>              

这篇关于基于ng-alain用户登录及权限相关的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！