如何根据用户角色Angular 4显示/隐藏元素

Posted 2023-02-27

【中文标题】如何根据用户角色Angular 4显示/隐藏元素

【英文标题】：How to show/hide element depending on user role Angular 4

【发布时间】：2018-08-09 13:32:55

【问题描述】：

我正在处理一个具有多个用户类型（超级用户 - 学校管理员 - 教师）的项目

每个角色都有权查看某些元素。

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

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

在app里面你会找到common services>>auth，这个文件夹里面有登录服务和认证保护。

在models >> enum里面，你会发现user type enum。

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

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

我为测试而创建的用户：

这应该将您引导到学校列表

管理员（具有超级用户角色）： [e-mail] 密码：12345

这应该将您引导到仪表板

学生（具有学生角色）： [e-mail] 密码：12345

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

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

更新：问题已解决，因此我删除了为测试而创建的用户。

【参考方案1】：

在您的项目中，当用户注册时，您会询问他是“老师”、“家长”还是“学生”。所以这里有你的条件。

当您登录或注册时，您应该将您的用户数据保存在某处（例如，在您可以与@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"

【讨论】：

是的，这就是我想要在我的项目链接中检查公共服务文件夹中的登录服务，我做了类似的事情，但我不知道如何调用里面的函数（我的函数） ngIf，我卡在这个：D

只需像在 public loginService: LoginService 中一样将声明放入构造函数中，然后在 dom *ngIf="loginService.currentUser.type_id" 中执行，当然如果您有 currentUser 变量。跨度>

不，它不起作用，我写了 *ngIf="this.authService.setUser(loginData) == loginData.user.type_id == UserType.SuperUser"

我知道语法，我只是在写的时候卡住了，我不知道在 ngif 上调用 usertype id 的正确方法，我想在我的代码中举个例子 :)

是的，问题是它们被声明为私有，我将它们声明为公共，现在可以工作了，谢谢 :)

【参考方案2】：

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

【参考方案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;