Angular 如何初始化基于角色的安全性？

我正在关注基于angular的安全性，但我不知道如何在用户使用我的angular应用程序时初始化并保持其当前权限

我只是创建了教程中解释的所有服务和指令，甚至创建了教程中未解释的一个服务，如下所示：

import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthorizationDataService {

  getUserAuthUrl = 'User/GetUserAuthorization';

  constructor(@Inject('BASE_URL') private baseUrl: string, private http: HttpClient) { }

  getPermissions(): Observable<string[]> {
    return this.http.get<string[]>(this.baseUrl + this.getUserAuthUrl);
  }
}

但是，当我尝试从AppModule甚至是div所在的特定组件调用initializePermissions时，我仍然没有得到预期的行为

export class AppModule {

  constructor(authorizationService: AuthorizationService) {
    authorizationService.initializePermissions();
  }
}

当然，我不能依靠用户来完成角色初始化的路由操作，所以我在这里不知所措，不知该怎么办

我的服务器端是.NETCore2.1，但我怀疑这在这里是否重要

编辑1。AuthGuardService：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router';
import { AuthorizationService } from './authorization.service';
import { AuthGroup } from './Helpers/authorization.types';

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

  constructor(protected router: Router,
    protected authorizationService: AuthorizationService) { }

  canActivate(route: ActivatedRouteSnapshot): Promise<boolean> | boolean {
    return this.hasRequiredPermission(route.data['auth']);
  }

  protected hasRequiredPermission(authGroup: AuthGroup): Promise<boolean> | boolean {
    // If user’s permissions already retrieved from the API
    if (this.authorizationService.permissions) {
      if (authGroup) {
        return this.authorizationService.hasPermission(authGroup);
      } else {
        return this.authorizationService.hasPermission(null);
      }
    } else {
      // Otherwise, must request permissions from the API first
      const promise = new Promise<boolean>((resolve) => {
        this.authorizationService.initializePermissions()
          .then(() => {
            if (authGroup) {
              resolve(this.authorizationService.hasPermission(authGroup));
            } else {
              resolve(this.authorizationService.hasPermission(null));
            }
          }).catch(() => {
            resolve(false);
          });
      });
      return promise;
    }
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/Router'导入{CanActivate，ActivatedRouteSnapshot，Router}；
从“./authorization.service”导入{AuthorizationService}；
从“./Helpers/authorization.types”导入{AuthGroup}；
@注射的({
providedIn:'根'
})
导出类AuthGuardService实现CanActivate{
构造函数（受保护的路由器：路由器、，
受保护的authorizationService:authorizationService）{}
canActivate（路由：ActivatedRouteSnapshot）：Promise |布尔值{
返回此.hasRequiredPermission（route.data['auth']）；
}
受保护的hasRequiredPermission（authGroup:authGroup）：承诺|布尔值{
//如果已从API检索到用户的权限
if（this.authorizationService.permissions）{
if（authGroup）{
返回此.authorizationService.hasPermission（authGroup）；
}否则{
返回此.authorizationService.hasPermission（null）；
}
}否则{
//否则，必须首先从API请求权限
常量承诺=新承诺（（解决）=>{
this.authorizationService.initializePermissions（）
.然后（（）=>{
if（authGroup）{
解析（this.authorizationService.hasPermission（authGroup））；
}否则{
解析（this.authorizationService.hasPermission（null））；
}
}).catch（（）=>{
决议（假）；
});
});
回报承诺；
}
}
}

您可以使用，这是一个很好的插件，可以控制路由和查看权限。

您也可以添加您的AuthGuardService吗？@yash已更新，但它与诚实完全相同。我可以看到许多问题。。。你能将此更新为stackblitz应用程序吗？我可以帮你把它修好it@yash，我从未使用过stackblitz，但它是这样的：它是我在VisualStudio环境中使用的非常简化的版本

const routes: Routes = [
  { path: 'newcustomer', component: NewCustomerComponent, canActivate: [AuthGuardService], data: { auth: 'UPDATE_FULL' } } }
];

export class AppModule {

  constructor(authorizationService: AuthorizationService) {
    authorizationService.initializePermissions();
  }
}

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router';
import { AuthorizationService } from './authorization.service';
import { AuthGroup } from './Helpers/authorization.types';

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

  constructor(protected router: Router,
    protected authorizationService: AuthorizationService) { }

  canActivate(route: ActivatedRouteSnapshot): Promise<boolean> | boolean {
    return this.hasRequiredPermission(route.data['auth']);
  }

  protected hasRequiredPermission(authGroup: AuthGroup): Promise<boolean> | boolean {
    // If user’s permissions already retrieved from the API
    if (this.authorizationService.permissions) {
      if (authGroup) {
        return this.authorizationService.hasPermission(authGroup);
      } else {
        return this.authorizationService.hasPermission(null);
      }
    } else {
      // Otherwise, must request permissions from the API first
      const promise = new Promise<boolean>((resolve) => {
        this.authorizationService.initializePermissions()
          .then(() => {
            if (authGroup) {
              resolve(this.authorizationService.hasPermission(authGroup));
            } else {
              resolve(this.authorizationService.hasPermission(null));
            }
          }).catch(() => {
            resolve(false);
          });
      });
      return promise;
    }
  }
}