Angular路由守卫校验多权限时满足条件如何提前退出循环返回结果

现有代码问题 #

你目前的草稿存在两个核心逻辑问题：

• forEach循环不会等待异步的hasClaim请求返回结果，函数会直接执行下方的跳转逻辑，无论权限校验结果如何都会返回false
• 每个hasClaim都是独立的Observable，没有做合并处理，无法实现找到第一个符合条件的权限就终止后续校验的需求

正确实现 #

用RxJS内置操作符处理异步序列即可完美满足需求，完整代码如下：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    // 取权限配置，兼容单权限字符串/多权限数组两种格式
    const rawClaims = route.data[RouteData.Claim];
    const claims: string[] = Array.isArray(rawClaims) ? rawClaims : [rawClaims];

    return from(claims).pipe(
        // 按顺序逐个校验权限
        concatMap(claim => this.securityService.hasClaim(claim)),
        // 找到第一个校验通过的结果就终止后续请求
        find(hasClaim => hasClaim === true),
        map(hasValidClaim => {
            if (hasValidClaim) {
                return true;
            }
            // 所有权限都校验不通过时跳转错误页
            this.router.navigate(['/forbidden']);
            return false;
        })
    );
}

注意事项 #

你当前修改后的路由配置里data字段的key是darwinClaim，需要确认RouteData.Claim常量的取值和该key保持一致，否则会无法读取到权限数组导致校验失败。

内容的提问来源于stack exchange，提问作者Prashant Yadav