Angular 我如何让我的守卫在解析器中等待http调用？

我有解析器和守卫。在我的基本路由路径上，我有解析器，它进行http调用，以获取用于身份验证的令牌

在儿童路线内，我有警卫等待许可。 始终在解析器之前执行guard-所以问题是首先执行我的guard，然后执行我的guard

因此，解析程序如下所示：

import { Injectable, Injector } from '@angular/core';
import { Resolve, RouterLink, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';
import { AuthStoreService } from '@services/auth-store.service';
import { LoginService } from 'src/api/controllers/Login';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable()
export class TokenResolver implements Resolve<any> {

    constructor(
        public injector: Injector,
        public authStore: AuthStoreService,
        public loginService: LoginService,
        private oauthService: OAuthService,
        public router: Router
    ) { }

    resolve(): Observable<any> {
        let resolver =  this.loginService.token({ token: this.oauthService.getAccessToken() }).pipe(
            tap(response => { 
                console.log('res', response);
                this.authStore.setData(response);
                this.authStore.isSetDataCalled = true;
                return response;
            },
            ), catchError(err => {
                console.log('err', err);
                this.router.navigate(['/405']);
                return Observable.throw(err);
            }));

            
            console.log('resolver', resolver);
            return resolver;
    }
}

---

您可以像这样等待响应：

@Injectable()
export class HasPermissionGuard implements CanActivate {

    constructor(
        public authStore: AuthStoreService,
        private router: Router // Use this to redirect to 403
    ) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return new Observable((subscriber) => {
            this.TokenResolver.resolve()
                .subscribe(response => {
                    // if (!this.authStore.hasUserInfo()) {
                    //     subscriber.next(true);
                    // }
                    // if (this.authStore.hasPermission(route.data.permission)) {
                    //     subscriber.next(true);
                    // }
                    if (response)
                        subscriber.next(true);
                    else
                        this.router.navigate(['/403']); // Toggle this to redirect to 403 route
                });
        });
    }
}

@Injectable（）
导出类HasPermissionGuard实现CanActivate{
建造师(
公共authStore:AuthStoreService，
专用路由器：路由器//使用它重定向到403
) { }
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回新的可观察对象（（订户）=>{
this.TokenResolver.resolve（）
.订阅（响应=>{
//如果（！this.authStore.hasUserInfo（））{
//订阅服务器。下一个（true）；
// }
//if（this.authStore.hasPermission（route.data.permission））{
//订阅服务器。下一个（true）；
// }
如果（答复）
订阅服务器。下一个（true）；
其他的
this.router.navigate（['/403']）；//切换此选项以重定向到403路由
});
});
}
}

有关更多信息，canActivate可以返回一个可观察值。 因此，您可以等待一个可观察对象，然后再次返回一个新的可观察对象

@Injectable()
export class HasPermissionGuard implements CanActivate {

    constructor(
        public authStore: AuthStoreService,
        private router: Router // Use this to redirect to 403
    ) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return new Observable((subscriber) => {
            this.TokenResolver.resolve()
                .subscribe(response => {
                    // if (!this.authStore.hasUserInfo()) {
                    //     subscriber.next(true);
                    // }
                    // if (this.authStore.hasPermission(route.data.permission)) {
                    //     subscriber.next(true);
                    // }
                    if (response)
                        subscriber.next(true);
                    else
                        this.router.navigate(['/403']); // Toggle this to redirect to 403 route
                });
        });
    }
}