Question

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

**dashboard.component.html**

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

我要实现的功能类似于路由的身份验证保护，添加一些装饰，以便基于用户个人资料仅激活相应的组件。使用[hidden]="hasNotAccessToComponent()"似乎是可行的，但我想知道是否还有更优雅的方法。

Answer 1

我建议如下使用canActivate在具有route Guards属性的路由器中进行设置-

因此，您的路线是-

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

您在 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;
    }
}

我以前使用validatePath的方法如下-

validatePath(pathArray: Array <string>, path: string): boolean {
    if(!pathArray) {
        return false;
    }

    if(pathArray.includes(path)) {
        return true;
    } else {
        this.router.navigate(['inaccessible']);
        return false;
    }
}

根据角色显示/隐藏组件

1 个答案: