Angular项目中怎么实现权限控制？下面本篇文章通过代码实例来聊聊Angular项目实现权限控制的方法，希望对大家有所帮助！
上一篇文章我们讲到了Angular 组件通信。本文我们讲讲，在项目开发中，你是否会遇到这样的需求：请根据用户登陆，限制其访问的内容。
So，这就是要进行权限控制。
对用户的权限限制，我们一般会有下面的处理方式：
对用户登陆的菜单做控制
对用户的行为做限制
我们结合Angular来讲解下这个话题。
菜单路由控制
系统开发的时候，会有很多的菜单，这个时候，就需要后端判断用户的角色，按照用户的权限返回不同的菜单路由。
返回的数据格式需要我们按照自己在app-routing.module.ts中编写好的路由路径对应。
比如，我们有路由文件如下：
//app-routing.module.tsconstroutes:Routes=[{path:'user-manage',component:AuthLayoutComponent,//通过鉴权的组件children:[{path:'',redirectTo:'user',pathMatch:'full'},{path:'user',//用户列表component:UserComponent},{path:'user/detail/:uuid',//用户详情，类似这种不会出现在菜单里面component:UserDetailComponent},{path:'department',//部门列表component:DepartmentComponent}]},//…]
在页面中，我们的菜单展示的数据是这样子的：
<!–demo.component.html–><ulnz-menunzMode="inline"[nzInlineCollapsed]="isCollapsed"><li*ngFor="letsubmenuofmenu_data"nz-submenu[nzTitle]="isCollapsed?'':submenu.title"[nzIcon]="submenu.icon"[nzOpen]="submenu.is_open"(nzOpenChange)="selectMenu(submenu)"><ul><li*ngFor="letchildofsubmenu?.children"nz-menu-itemnzMatchRouter><a[routerLink]="['/'+child.url]">{{child.title}}</a></li></ul></li></ul>
定义了一个二级的菜单，拥有下面几个字段：
title字段 – 菜单的标题
url字段 – 菜单的路由，对应app-routing.module.ts中的完整的path
icon字段 – 标题前的小图标，二级标题没有
is_open字段 – 菜单是否展开的标识
此时，后端的菜单接口，应该返回类似下面的数据：
//demo.component.tspublicmenu_data:any=[{title:"成员管理",url:"user-manage",icon:"user-switch",//这里是用了angularantdesign的图标is_open:false,children:[{title:"用户",url:"user-manage/user",icon:undefined,is_open:false},{title:"部门",url:"user-manage/department",icon:undefined,is_open:false}]},//…]
也许你会有疑问?️：二级标题中都用不上icon和is_open这两个字段，为啥还要写？
嗯～，读者可以对后端返回提要求，但是为了保持数据的可读性和易操作，还是保留为好…
用户行为控制
用户的行为控制，这个的就很细粒度的行为了。小到控制用户的一个按钮的展示等，但是本质来说，都是对后端接口请求的限制?。比如，你请求一个列表，但是你没有权限，那么你就请求不了，报401的错误。
我们可以按照需求，针对用户的不同角色，限定用户不能查看或者其他操作。但是，这样很不合理，用户可以通过postman等工具发起请求，而不通过系统。所以，我们得–
在后端做一层限制
我们获取到后端返回的接口权限，比如接收到下面这些数据：
{code:0,msg:'ok',results:{getUserList:{url:'/api/get/user/list',//当然，可以按照前后端规定返回，不一定是真实的url…enable:true},editUser:{url:'/api/edit/:uuid',enable:false}}}
我们得到数据之后，跟前端保存的内容做比对，再按照条件控制，接口需要做对应的限制访问，而不是单纯前端判断。
<!–demo.component.html–><button*ngIf="userObj.editUser.enable">Edit</button>
单纯前端判断：1. 不好维护 2. 不安全，用户可以跨过浏览器请求
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/29396.html；
