Angular 基于角色显示/隐藏组件

我有一个仪表板组件，将提供不同的配置文件。对于每个配置文件，我创建了一个单独的组件，并将其添加到主仪表板组件中：

**dashboard.component.html**

<app-employer-dashboard></app-employer-dashboard>
<app-candidate-dashboard></app-candidate-dashboard>

**dashboard.component.html**

我想要实现的是类似于对路由进行身份验证的保护，添加一些装饰，以便根据用户配置文件，仅激活相应的组件。

---

使用

[hidden]=“hasNotAccessToComponent（）”

似乎是可能的，但我想知道是否有更优雅的方法来实现这一点。

我建议在路由器中使用

canActivate

属性，使用

路由保护设置它，如下所示-

所以，你的路线是-

const routes: Routes = [
    {
        path: 'employer',
        component: EmployerDashboardComponent,
        canActivate: [AuthGuard]
    },
    {
        path: 'candidate',
        component: CandidateDashboardComponent,
        canActivate: [AuthGuard]
    }
];

您在中的
canActivate
方法类似于以下内容-

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    const currentUser = this.userService.getCurrentUser();
    this.currentUserRole = currentUser ? JSON.parse(currentUser)['role'] : undefined;
    this.currentUserRole = this.currentUserRole ? this.currentUserRole.toLowerCase() : undefined;

    // I stored allowed paths with the same user object
    let allowedPaths = currentUser ? JSON.parse(currentUser)['allowedPaths'] : undefined;

    // obtaining an array of strings for allowed paths
    this.allowedPaths = allowedPaths ? allowedPaths.split(",").map(Function.prototype.call, String.prototype.trim) : undefined;
    const isLoggedIn = this.userService.isLoggedIn();
    if(isLoggedIn) {
        if (this.currentUserRole == 'admin') {
            return true;
        } else {
            return this.validatePath(this.allowedPaths, state.url);
        }
    } else {
        return false;
    }
}

我建议您在路由器中使用
canActivate
属性，使用
route Guards
设置它，如下所示-

所以，你的路线是-

const routes: Routes = [
    {
        path: 'employer',
        component: EmployerDashboardComponent,
        canActivate: [AuthGuard]
    },
    {
        path: 'candidate',
        component: CandidateDashboardComponent,
        canActivate: [AuthGuard]
    }
];

您在中的
canActivate
方法类似于以下内容-

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    const currentUser = this.userService.getCurrentUser();
    this.currentUserRole = currentUser ? JSON.parse(currentUser)['role'] : undefined;
    this.currentUserRole = this.currentUserRole ? this.currentUserRole.toLowerCase() : undefined;

    // I stored allowed paths with the same user object
    let allowedPaths = currentUser ? JSON.parse(currentUser)['allowedPaths'] : undefined;

    // obtaining an array of strings for allowed paths
    this.allowedPaths = allowedPaths ? allowedPaths.split(",").map(Function.prototype.call, String.prototype.trim) : undefined;
    const isLoggedIn = this.userService.isLoggedIn();
    if(isLoggedIn) {
        if (this.currentUserRole == 'admin') {
            return true;
        } else {
            return this.validatePath(this.allowedPaths, state.url);
        }
    } else {
        return false;
    }
}

嗯，还有
*ngIf
，但不确定它是否适合你的“优雅方式”。如果我错了，请纠正我，*ngIf加载元素，然后注释值是否为false？@badrslaoui您也可以使用
NgSwitchCase
或@Lafexlos所说的使用
*ngIf
。我建议您在路由器中使用
canActivate
属性设置它，使用
路由保护
我建议您使用
canActivate（）
和/或
可以激活路由防护的child（）
。依赖
*ngIf
可能导致脆弱性。这两篇文章可能会对你有所帮助：，嗯，还有
*ngIf
，但不确定它是否符合你的“优雅方式”。如果我错了，请纠正我，*ngIf加载元素，然后注释值是否为false？@badrslaoui您也可以使用
NgSwitchCase
或@Lafexlos所说的使用
*ngIf
。我建议您在路由器中使用
canActivate
属性设置它，使用
路由保护
我建议您使用
canActivate（）
和/或
可以激活路由防护的child（）
。依赖
*ngIf
可能导致脆弱性。这两篇文章可能会帮助你：，是否可以保持相同的路径，既“仪表板”，而不是“雇主”和“候选人”，并使用不同的防护措施？是的，你可以轻松实现相同的目标。请阅读我在上面的链接中提到的官方文件，这样你就会找到一个方法！是否有可能保持相同的路径，包括“仪表板”，而不是“雇主”和“候选人”，并使用不同的防护装置？是的，您可以轻松实现相同的目标。请阅读我在上面的链接中提到的官方文件，这样你就会找到一个方法！