Angular Router route guard CanActivate always returns false

Question

我已经使用 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}

Answer 1

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

仔细查看文档，canActivate 也可以 return 解析为 true 或 false 的 Observable，这允许您执行异步操作检查。

试试这个：

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 是布尔值的函数。

Angular Router route guard CanActivate always returns false

Angular Router route guard CanActivate always returns false

canactivate

angular

angular-router