Angular Router route guard CanActivate always returns false

Angular Router route guard CanActivate always returns false

我已经使用 CanActivate 来保护一个页面,但它总是返回错误,因为我无法访问受保护的路由器。我尝试了很多方法,但没有成功解决问题。我是 angular 的新手,我一直在验证条件 if (data.hasPermission == true).

谁能帮帮我吗?

auth.service.ts

//Checking user access
getUserAccess(name: string): Observable<any> {
    return this.http.get(`api/${name}/useraccess`).pipe(
        map(
            (response: any) => {
                return response;
            },
        ),
    );
};


checkUserPermission() {
    this.getUserAccess(this.name).subscribe(data => {
        this.hasaccess = false;
        if (data.hasPermission == true) {
            this.hasaccess = true;
        } else {
             this.hasaccess = false;
        }
    });

    return this.hasaccess
}


isUserHasAccess(): boolean {
    return this.hasaccess
}

auth.guard.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isUserHasAccess()) {
        return true;
    } else {
        return false;
    }
}
json 来自 API

的数据

{"hasPermission":true}

您正在 return 获取静态值,而不是等待异步任务完成。

仔细查看文档,canActivate 也可以 return 解析为 truefalseObservable,这允许您执行异步操作检查。

试试这个:

checkUserPermission() {
    return this.getUserAccess(this.name).pipe(map(data => data.hasPermission === true))
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.authService.checkUserPermission();
}

Angular Router 将订阅那个 Observable,您不必订阅。您所要做的就是将其映射到 return 是布尔值的函数。