Javascript 在成功登录angular 6后，是否有方法创建基于角色的访问

我希望当一个人登录时，检查管理员类型，然后将他重定向到examp HOD的特定组件应该访问AdminDashboard cict应该访问admin2 dashboard，等等

这是我的猫鼬模式

这是我的auth.guard.ts

我希望当一个人登录时，检查管理员类型，然后将他重定向到examp HOD的特定组件应该访问AdminDashboard cict应该访问admin2 dashboard，等等

这是我的角色守卫

从'@angular/core'导入{Injectable}；
从'@angular/router'导入{CanActivate，ActivatedRouteSnapshot，RouterStateSnashot，UrlTree}；
从“rxjs”导入{Observable}；
从“/auth.service”导入{AuthService}；
@注射的({
providedIn:'根'
})
导出类RoleGuard实现CanActivate{
构造函数（公共身份验证：身份验证服务）{}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnashot）：可观察的|承诺|布尔| UrlTree{
返回true；
}
}

此包非常适合基于角色的权限，您可以在

路由级别

、

组件级别

或单个元素上设置条件

可以在如下模板中使用-

<ng-template ngxPermissionsOnly="ADMIN">
  <div>You can see this text congrats</div>
 </ng-template>

你可以看到这篇文章，祝贺你

---

兼容所有版本的Angular（v2+）

我建议使用canActivate RoleGuardService

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { Router, ActivatedRouteSnapshot } from '@angular/router';


@Injectable({
  providedIn: 'root'
})
export class RoleGuardService {
    constructor(public auth: AuthService) {}
    canActivate(route: ActivatedRouteSnapshot): boolean {
        // Here only return true if only user have that permission or have that role
        // Otherwise return false
        // You can read data route.data.expectedRoles
        return true;
    }
}

在你的app.routes.ts中

export const ROUTES: Routes = [
{
    path: 'dashboard',
    canActivate: [RoleGuardService],
    data: {
      expectedRoles: ['Admin', 'HOD']
    }     
}

通过这种机制，如果用户没有访问权限（角色或权限），它可以防止路由更改

在您的组件中，您也可以轻松地使用这种方式

<div *ngIf="*** an condition to check your logged user have a role or privillage  ***">

</div>

---

最好是用户拥有一组权限的角色

如果我不使用角材质，那该怎么办？@pardeep它对我有效吗？角材质或css与此软件包没有关系。我尝试过，但我可以得到一个关于角色库的清晰教程redirecting@KyleMutta你能提到那个教程的网址吗？你能告诉我吗完成代码并告诉我如何实现我找不到任何帮助教程@dasunsethanks brother，但我希望它检查rolle并提供访问权限，这意味着它应该检查数据库并缩进角色，并提供相应角色的访问权限。例如，HOD应仅访问管理页面如何访问预期角色

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class RoleGuard implements CanActivate {

  constructor( public auth: AuthService) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {


    return true;
  }

}

<ng-template ngxPermissionsOnly="ADMIN">
  <div>You can see this text congrats</div>
 </ng-template>

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { Router, ActivatedRouteSnapshot } from '@angular/router';


@Injectable({
  providedIn: 'root'
})
export class RoleGuardService {
    constructor(public auth: AuthService) {}
    canActivate(route: ActivatedRouteSnapshot): boolean {
        // Here only return true if only user have that permission or have that role
        // Otherwise return false
        // You can read data route.data.expectedRoles
        return true;
    }
}

export const ROUTES: Routes = [
{
    path: 'dashboard',
    canActivate: [RoleGuardService],
    data: {
      expectedRoles: ['Admin', 'HOD']
    }     
}

<div *ngIf="*** an condition to check your logged user have a role or privillage  ***">

</div>