Angular CanActivate在浏览器刷新时失败，即使observable返回true

Question

我们为CanActivate提供了一个路由保护，当在网站上的链接之间单击时，它工作正常，但当我们完全刷新浏览器时会失败(即，它重定向到主页，与CanActivate返回false的行为相同(。

这是我的警卫

@Injectable()
export class PermissionCheckGuard implements CanActivate {
    constructor(private userPermissionService: UserPermissionService) { }
    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> | Promise<boolean> | boolean {
        let permissionTag = route.data["permissionTag"] as string;
        let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);
        hasPermission$.subscribe(x => {
            console.log(x);
        });
        return hasPermission$;
    }
}

这是我的路由器配置：-

path: 'security/security-example', component: SecurityExampleComponent, canActivate: [PermissionCheckGuard], data: { permissionTag: 'Site_Permission_1' }

如果重要的话，这是hasPermission功能

 public hasPermission(userId: string, subjectType: SubjectType, permissionTag: string, subjectId: string): Observable<boolean> {
        if (userId == null) {
            userId = 'Current';
        }
        const url = this.apiUrlBuilder.create('Security', 'Users', userId, 'Permission', {
            permissionTag: permissionTag,
            subjectType: subjectType,
            subjectId: subjectId
        });
        return this.http.get(url)
            .map<Response, boolean>((response: Response) => {
                return <boolean>response.json();
            })
            .catch((error) => {
                return this.errorHandlingService.ToNotification(error, this);
            })
    }

我看不出我做错了什么，警卫返回了一个可观察的，控制台日志总是返回true。这是angular的问题还是我的代码有错误？

Answer 1

我想它在得到响应之前就已经解决了。请尝试在此处使用subject。

import { Subject } from 'rxjs';
canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
    let permissionTag = route.data["permissionTag"] as string;
    let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);
 const subject: Subject<boolean> = new Subject();
    hasPermission$.subscribe(x => {
        console.log(x);
        subject.next(x);
    });
    return subject.asObservable();
}