如何在angular7中的route guard内部进行http post调用？

我有一个Angular 7应用程序，其中我有一个post呼叫，根据该post呼叫响应，我想使guard处于活动/非活动状态。我有这样的路线守卫

canActivate = (_router: ActivatedRouteSnapshot): boolean => {
    console.log('in link expiry guard')
    let userEmail = _router.paramMap.get('email');
    let isAllow;

    console.log('params : ', userEmail)
    userEmail = this._utilityService.decryptMsgByCryptoJs(userEmail);
    console.log('user email : ', userEmail)
    this._dataService.post(this._const.userResetPasswordLinkExpiry, { email: userEmail }).subscribe(resp => {
        console.log('verify response : ',resp)
        if (resp.success) {
            console.log('in success')
            isAllow = true;
        } else {
            isAllow = false;
        }
    })
    console.log('allow flag  : ',isAllow)
    if (isAllow) {
        console.log('in allow')
        return true;
    } else {
        console.log('in not allow')
        this._utilityService.navigate('/login');
        this._dataService.exhangeResetPasswordObsMsg({ event: 'linkExpired' });
        return false;
    }
}

---

但问题是，当我的

http

post

调用正在进行时，我的守卫会完全执行，并返回false，然后响应来自post调用。如何管理此场景，以便根据

http

post

呼叫响应使路由为真或假

如果要在

canActivate

函数中发出Http请求，则需要返回一个

可观察的

，而不是

布尔值

，因为您现在正在执行异步操作

由于您希望在失败时导航，因此应该返回

Observable

简单版本

构造函数（专用路由器：路由器）{}
canActivate（路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot）：可观察{
返回此.http.post（url，body）.pipe(
map（（resp:any）=>resp.success？true:this.router.parseUrl（'/path'））
);   
}

我们返回可观察的http请求（路由器将通过订阅来调用它），并将响应映射到

• true

  -路由器可以进入受保护的路由

• UrlTree

  -路由器应该导航到我们返回的路由

适用于你的例子 如果我们将此应用于您的示例，我们需要在管道中做更多的工作，因为您还有一个额外的服务调用

//TODO:注入其他服务
构造函数（专用路由器：路由器）{}
canActivate（路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot）：可观察{
const userEmail=route.paramMap.get（'email'）；
//我假设这是一个同步呼叫
userEmail=this.\u utilityService.decryptMsgByCryptoJs（userEmail）；
const url=this.\u const.userResetPasswordLinkExpiry；
const body={email:userEmail}；
返回此.\u dataService.post（url，body）.pipe(
//从响应到真/假的初始映射
map（（resp:any）=>resp.success），
//如果为false，则执行操作
点击（成功=>{
如果（！成功）{
//我假设这是同步的。如果不是，你需要做一个开关映射
这是._dataService.exengageresetpasswordobsmg（{event:'linkExpired'}）；
}
}),
//布尔| UrlTree的最终映射
map（success=>success？true:this.router.parseUrl（'/login'））
);   
}

---

我假设其中有一些服务调用是同步的。此答案演示了如何在

canActivate

内部执行异步调用，并允许路由器导航或返回另一条导航路径。

问题是您在并发函数之外返回，代码会不断求值。返回post调用内部而不是外部，并返回

承诺

或

可观察

而不是布尔值。CanActivate可以返回其中任何一个->你能告诉我答案吗？查看我的更新问题我已经更新了路线守卫。但是现在它在第

canActivate=（\u router:ActivatedRouteSnapshot）：Observable

行上给出了一个错误。如果说

函数必须返回一个值

Hii，您可以在gurad中使用route Reolver而不是http。您仍然需要作为一个整体返回调用，请参阅：\n现在它给出了一个类似这样的错误

找不到名称“UrlTree”。

我没有将所有导入都放在那里。如果您使用的是VS代码，您应该能够自动导入它。如果没有，您可以从“@angular/router”手动导入它。我已经完成了所有导入，但在此之后它就开始了。请查看此信息，错误在

canActivate

上。您仍然试图通过编写

canActivate=（）

为其分配函数。您只需将其编写为普通类函数

canActivate（/.params./）

，就像我的答案一样。请参阅我更新的问题。我已经根据您的回答更新了我的防护定义，但仍然得到相同的错误。