如何让我的警卫在解析器中等待 http 调用？答案

【问题标题】：How can i make my guard to wait for http call in resolver?如何让我的警卫在解析器中等待 http 调用？
【发布时间】：2021-04-13 09:33:48
【问题描述】：

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

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

所以解析器看起来像这样：

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;
    }
}

我怎样才能在我的守卫中等待电话

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, Router } from '@angular/router';
import { AuthStoreService } from '@core/services/auth-store.service';

@Injectable()
export class HasPermissionGuard implements CanActivate {

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        
        if (!this.authStore.hasUserInfo()) {
            return true;
        }
        if (this.authStore.hasPermission(route.data.permission)) {
            return true;
        }

        this.router.navigate(['/403']); // Toggle this to redirect to 403 route
        return false;
    }
}

【问题讨论】：

标签： angular angular-guards

【解决方案1】：

您可以像这样等待响应：

@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
                });
        });
    }
}

有关更多信息，canActivate 可以返回一个可观察对象。所以，你可以等待一个 observable 并再次返回一个新的 observable。

【讨论】：