如何 show/hide 元素取决于用户角色 Angular 4

Question

我正在处理一个有不止一种用户类型的项目（超级用户 - SchoolAdmin - 教师）

并且每个角色都有权限查看一些元素。

如何使用 *ngIf 根据登录的用户角色隐藏元素？

这是 Stack-blitz 上的项目 link，我上传了其中的一些内容以指导我进行实时预览。

在app里面有common services >> auth，这个是有登录服务和鉴权保护的文件夹。

在模型 >> 枚举中，您会发现用户类型枚举。

在组件登录中，您会找到定义用户类型的表单。

在路由内部，您将看到为每个组件创建的预期角色。

我创建的测试用户：

这会将您转到学校列表

管理员（具有超级用户角色）：测试1@test.com 密码：12345

这应该会将您带到信息中心

学生（具有学生角色）：测试2@test.com 密码：12345

例如，我想隐藏仪表板上的元素只显示给超级用户角色，我该怎么做？

我知道 ngIf 有一种方法，但我一直坚持在 NgIf 中编写它的正确方法，我想要我的代码示例而不是虚拟代码。

更新：问题已解决，所以我删除了测试用户。

Answer 1

布尔值true或false用于隐藏。在 HTML 文件中 <div *ngIf = !test>_contents to be printed_</div> 在 .ts 文件中初始化 test = false; 所以每当 this.test = true; div 将显示否则将隐藏。检查您的情况并使 test = true;

Answer 2

在您的项目中，当用户注册时，您会询问他是 'Teacher'、'Parent' 还是 'Student'。所以这里有你的条件。

当您 sign-in 或注册时，您应该将您的用户数据保存在某处（例如，在您可以与 @injection 一起使用的服务中。

然后使用这些数据，您应该像这样在 DOM 中进行一些测试：

/* if type_id == id(student) */
 <div *ngIf="myService.currentUser.type_id">
   // your student display ...
 </div>

 /* if type_id == id(teacher) */
 <div *ngIf="myService.currentUser.type_id">
   // your teacher display ...
 </div>

这对你有帮助吗？您应该阅读此文档 Services

[你的例子]

您的服务：

import { Injectable } from '@angular/core';
/*
   other import 
*/

 @Injectable()
 export class UserService {

      public currentUser: any;

      constructor(){}

      public login(loginData: LoginModel): any {
            const apiUrl: string = environment.apiBaseUrl + '/api/en/users/login';  
            let promise = new Promise((resolve, reject) => { // this is a  promise. learn what is a promise in Javascript. this one  is only more structured in TypeScript
  // a promise is returned to make sure that action is taken only after the response to the api is recieved
             this.http.post(apiUrl, loginData).subscribe((data: any) => {
                if(data.status)
                {
                  var userData = {
                      token: data.token,
                      user:data.user 
                     };
                this.currentUser = data.user // HERE SAVE YOUR user data
                return resolve(userData);
                }
                else {
                       return reject(data)
                 }
               }, (err: HttpErrorResponse) => {
               return reject(err);
            });
          });
     return promise;
      }
 }

然后在您的构造函数中注入该服务，并在

中注入您的服务

组件：

// Don't forgot to import UserService !!
constructor(public userService: UserService){}

DOM:

*ngIf="userService.currentUser.type_id == 1"

Answer 3

你应该这样做：

<div *ngIf="superUserLogged">
   // your SuperUser display ...
 </div>
<div *ngIf="schoolAdminLogged">
       // your SuperUser display ...
</div>
<div *ngIf="teacherLogged">
       // your SuperUser display ...
</div>

并且在 *.ts 文件中，当有人登录您的系统时：

onLogin(userrLogged: string) {
    this.superUserLogged  = false;
    this.schoolAdminLogged = false;
    this.teacherLogged = false;
    switch (userrLogged) {
        case 'SuperUser':
            this.superUserLogged = true;
            break;
        case 'SchoolAdmin':
            this.schoolAdminLogged = true;
            break;
        case 'Teacher':
            this.teacherLogged = true;
            break;
}

如何 show/hide 元素取决于用户角色 Angular 4

How to show/hide element depending on user role Angular 4

authentication

user-roles

typescript

angular-ng-if

angular