如何根据用户角色显示/隐藏元素Angular 4
我正在做一个有多个用户类型的项目(SuperUser - SchoolAdmin - Teacher)
并且每个角色都有查看某些元素的特权。
如何使用*ngIf根据登录的用户角色隐藏元素？
这是Stack-blitz上的link项目，我上传了一些来指导我的实时预览。
在app里面，你会发现常见的服务>>身份验证，这是有登录服务和身份验证守卫的文件夹。
在models >>枚举中，您可以找到用户类型枚举。
在组件登录中，您将找到定义用户类型的表单。
在路由中，您将看到为每个组件创建的预期角色。
我为测试而创建的用户：
这应该会将您转到学校列表
管理员(具有超级用户角色)：test1@test.com密码: 12345
这应该会将您转到仪表板
学生(具有学生角色)：test2@test.com密码: 12345
例如，我想隐藏仪表板上的元素，只显示给超级用户角色，我该怎么做？
我知道NgIf有一种方法，但我坚持在ngIf中编写它的正确方式，我希望在我的代码中使用示例，而不是虚拟代码。
更新:问题已经解决，所以我删除了用于测试的用户。
回答 3
Stack Overflow用户
发布于 2018-03-01 21:30:34
在你的项目中，当用户注册时，你是在问他是“老师”、“家长”还是“学生”。这就是你的状况了。
当您登录或注册时，您应该将您的用户数据保存在某个地方(例如，在可以与@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"Stack Overflow用户
发布于 2018-03-01 21:28:25
布尔值true或false用于隐藏。HTML文件中<div *ngIf = !test>_contents to be printed_</div>在.ts文件中初始化test = false;因此，无论何时this.test = true; div都会显示，否则将隐藏。检查您的状况并使test = true;
Stack Overflow用户
发布于 2018-03-01 22:13:38
您应该执行以下操作：
<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;
}https://stackoverflow.com/questions/49050425
复制相似问题
腾讯云开发者
