如何在angular7中的路由保护内进行http post调用？

Question

我有一个 Angular 7 应用程序，在其中我有一个呼叫后响应，并且基于该呼叫后响应，我想让警卫处于活动/非活动状态。我有这样的路线守卫

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 call。我该如何管理这种情况，所以我将根据 http post 呼叫响应使路由为真或假。

Answer 1

如果您想在 canActivate 函数中发出 Http 请求，则需要返回 Observable<boolean> 而不是 boolean，因为您现在正在执行异步操作。

既然你想在失败时导航，你应该返回Observable<boolean | UrlTree>。

简单版

constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot): Observable<boolean | UrlTree> {
  return this.http.post(url, body).pipe(
    map((resp: any) => resp.success ? true : this.router.parseUrl('/path'))
  );   
}

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

• true - 路由器可能会继续到受保护的路由
• UrlTree - 路由器应该导航到我们返回的路由

应用于您的示例

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

// TODO: inject other services
constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, 
      state: RouterStateSnapshot): Observable<boolean | UrlTree> {
    const userEmail = route.paramMap.get('email');

    // I am assuming this is a synchronous call
    userEmail = this._utilityService.decryptMsgByCryptoJs(userEmail);

    const url = this._const.userResetPasswordLinkExpiry;
    const body = { email: userEmail };

    return this._dataService.post(url, body).pipe(
      // initial map from response to true/false
      map((resp: any) => resp.success),

      // perform an action if false
      tap(success => {
        if (!success) {
          // I'm assuming this is synchronous. If not, you will need to do a switchMap
          this._dataService.exhangeResetPasswordObsMsg({ event: 'linkExpired' });
        }
      }),
      // final map to boolean | UrlTree
      map(success => success ? true : this.router.parseUrl('/login'))
    );   
}

我假设那里有一些服务调用是同步的。此答案演示了如何在 canActivate 内执行异步调用，并允许路由器导航或返回要导航到的替代路由。