Angular Permission Guard 问题答案

【问题标题】：Angular Permission Guard issueAngular Permission Guard 问题
【发布时间】：2020-06-22 14:55:14
【问题描述】：

问题是每次我刷新页面时，有时 permissions$ Observable 会返回一个空白数组，有时则不会。您认为我的代码有什么问题？

@Injectable({
  providedIn: 'root'
})
export class PermissionGuard implements CanActivate {
  @Select(UserState.permissions) permissions$: Observable<string[]>;

  constructor(private appService: AppService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.permissions$.pipe(map(permissions => {
      for (const perm of next.data.permissions) {
        if (permissions.includes(perm)) {
          return true;
        }
      }
      return false;
    }));
  }
}

【问题讨论】：

嗨。你如何创建一个商店？您是否在导航前等待 store init？
我在 app.component.ts 中初始化了一个 store，我应该把它放在哪里让它在导航之前运行？
您可以在导航前使用 APP_INITIALIZER 初始化商店。文档：angular.io/api/core/APP_INITIALIZER 更多详情：indepth.dev/hooking-into-the-angular-bootstrap-process

标签： angular ngxs

【解决方案1】：

我在我的 rxjs 流中使用了一个过滤器并等到某个条件。未经测试，请勿复制粘贴。

@Injectable({
  providedIn: 'root'
})
export class PermissionGuard implements CanActivate {
  @Select(UserState.permissions) permissions$: Observable<string[]>;

  constructor(private appService: AppService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.permissions$.pipe(
      // the idea here is if the permissions exists and is an array, then we can continue
      filter(permissions => !!permissions && Array.isArray(permissions)),
      map(permissions => {
        for (const perm of next.data.permissions) {
          if (permissions.includes(perm)) {
            return true;
          }
        }
        return false;
      }));
  }
}

【讨论】：