基于用户角色的Authguard的Angular 10安全路由

在本教程中，我们将看到基于用户角色的Authguard如何安全10安全路由。基于令牌和Authinterceptor确保API的Real是可以的，但我们可以根据用户拥有的角色来保护路线。
如果用户无权查看该页面，则可能会看到许多应用程序显示错误。然后让我们在Angular App中创建它。

用户角色安全路由

现在让我们说我们有一个API，它给出了当前登录的用户角色。我们在客户端上维护的用户角色对象，因此我们可以在访问路由时匹配。
让我们说我们有4个用户角色

export enum Roles {
  ADMIN = 'ADMIN',
  BUYER = 'BUYER',
  SELLER = 'SELLER',
  DATA_MANAGER = 'DATA MANAGER'
}

现在我们拥有我们的用户角色列表，我们可以将用户角色分配给我们具有访问该页面的权限的单个路由。
让我们做出一些改变App-Routing.module.ts.ts.

const routes: Routes = [
  {
    path: 'onboard', loadChildren: () => import('../onboard/onboard.module').then(m => m.OnboardModule),
    canActivate: [AuthGuard],
    data: {
      userRoles: [] // All User Can Access but must be login
    }
  },
  {
    path: 'dashboard', loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardModule),
    canActivate: [AuthGuard],
    data: {
      userRoles: [Roles.ADMIN, Roles.BUYER, Roles.SELLER, Roles.DATA_MANAGER] // Multiple Allowed User
    }
  },
  {
    path: 'data-importer', loadChildren: () => import('../data-importer/data-importer.module').then(m => m.DataImporterModule),
    canActivate: [AuthGuard],
    data: {
      userRoles: [Roles.DATA_MANAGER] // Single Allowed User
  }
  ...
];
@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRouterModule {}

现在我们在这里设置了基于用户角色来保护我们的路线的两件事。

• canActivate: [AuthGuard]:
  authguard将包含或逻辑以检查数据对象中的指定用户角色与当前登录用户角色匹配。
• data: { userRoles: [Roles.DATA_MANAGER, ...] }:
  ulserroles阵列将设置为相应的路由，稍后我们可以访问authguard类中的该数据。每条路线都可以使用其唯一用户访问它。

10月27日，2020年

基于用户角色在Angular 10中查看组件

• 基于用户角色查看组件
• 用户角色服务
• 指令根据用户角色展示和隐藏

根据用户角色使用authguard安全路由

现在，让我们跳入Auth Guard实现，这将包含通过验证用户角色来访问的方法的方法。

import { Injectable, Inject } from '@angular/core';
import { Router, CanActivate, CanActivateChild, CanLoad, ActivatedRouteSnapshot} from '@angular/router';
import { Roles } from './util/user-roles';
import { AuthorizationService } from './authorization.service';

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {

  constructor(
    @Inject(AuthorizationService) private authorizationService: AuthorizationService,
    @Inject(Router) private router: Router
  ) {}

  /**
   * Can this route be activated?
   * @param {ActivatedRouteSnapshot} route - The route.
   * @returns {Promise} True if user is authenticated otherwise false
   */
  public async canActivate(route: ActivatedRouteSnapshot): Promise {
    const allowedUserRoles = this.getRoutePermissions(route);
    return await this.checkPermission(allowedUserRoles);
  }

  /**
   * Can this child route be activated?
   * @param {ActivatedRouteSnapshot} route - The route.
   * @returns {Promise} True if user is authenticated otherwise false
   */
  public async canActivateChild(route: ActivatedRouteSnapshot): Promise {
    const allowedUserRoles = this.getRoutePermissions(route);
    return await this.checkPermission(allowedUserRoles);
  }

  /**
   * Can this route be loaded.
   * @returns {Promise} True if user is authenticated otherwise false
   */
  public canLoad(): Promise {
    return this.checkPermission(null);
  }

  /**
   * Get allowed user roles from the route.
   * @param {ActivatedRouteSnapshot} route - The route.
   * @returns {string[]} All user roles that are allowed to access the route.
   */
  private getRoutePermissions(route: ActivatedRouteSnapshot): Roles[] {
    if (route.data && route.data.userRoles) {
      return route.data.userRoles as Roles[];
    }
    return null;
  }

  /**
   * Check if a user is authenticated
   * @param {string[]} allowedUserRoles - These user roles have the permissions to access the route.
   * @returns {Promise} True if user is authenticated otherwise false
   */
  private checkPermission(allowedUserRoles: Roles[]): Promise {
    return this.authorizationService.getSession().then((session: boolean) => {
      if (session) {
        if (!allowedUserRoles) {
          return true;   // if no user roles has been set, all user are allowed to access the route
        } else {
          return this.authorizationService.getUserRoles().then((userRoles: string[]) => {
            if (this.authorizationService.areUserRolesAllowed(userRoles, allowedUserRoles)) {
              return true;
            } else {
              this.router.navigateByUrl('/nopermission');
              return false;
            }
          });
        }
      } else { return false; }
    });
  }
}

三个主要功能 角路由器 are CanActivate, CanActivateChild, CanLoad. With these methods, we can manage our authentication for routes. These methods will have a return type boolean i.e. whether to load or not.

other than that we have our private custom method getRoutePermissions which will give us the route data from ActivatedRouteSnapshot and the checkPermission method is linked with another service that will validate both the token-based session and also it will get the user-role from the server.

授权服务 （可选的）

我们已经了解了Authguard，但您可能会介绍授权服务中的内容？
我在authguard中使用的三种授权服务方法如下。

public getSession(): Promise {
  const session = localStorage.getItem('token');
  return new Promise((resolve, reject) => {
    if (session) {
      return resolve(true);
    } else {
      return reject(false);
    }
  });
}

我们已经检查了登录后是否设置了令牌。
您必须使用JWT令牌或某人通过手动将价值放在本地存储中来破解您的系统。

public getUserRoless(): Promise {
 return new Promise((resolve, reject) => {
   this.http.get(`${this.baseUrl}getUserRoles`)
   .pipe(catchError((error: any, caught: any) => {
       reject(error);
       return caught;
     }),
     map((res: any) => res.data))
   .subscribe((role: string[]) => {
     resolve(role);
   });
 });
}

在此方法中，我们只是获取登录用户角色列表。

public areUserRolesAllowed(userRoles: string[], allowedUserRoles: Roles[]): boolean {
  for (const role of userRoles) {
    for (const allowedRole of allowedUserRoles) {
      if (role.toLowerCase() === allowedRole.toLowerCase()) {
        return true;
      }
    }
  }
  return false;
}

此方法仅迭代来自阵列的数据并检查其包括与否。