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

Question

我正在开发一个具有多个用户类型( super 用户 - 学校管理员 - 教师)的项目

每个 Angular 色都有查看某些元素的权限。

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

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

在应用程序中你会找到常用服务>> auth，这是包含登录服务和身份验证防护的文件夹。

在模型>>枚举中，您将找到用户类型枚举。

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

在路由内部，您将看到为每个组件指定的预期 Angular 色。

我为测试创建的用户:

这应该会将您路由到学校列表

管理员(具有 super 用户 Angular 色): [email protected] 密码:12345

这应该会将您引导至仪表板

学生(具有学生 Angular 色): [email protected] 密码:12345

例如，我想隐藏仪表板上的元素，使其仅向 super 用户 Angular 色显示，我该如何执行此操作？

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

更新:问题已解决，因此我删除了用于测试的用户。

Answer 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;
      }
 }

然后将该服务注入(inject)到您的构造函数中，并将您的服务注入(inject)到

组件:

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

DOM:

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