如何在angular7的路由保护器中进行http发布呼叫? [英] How to make http post call inside route guard in angular7?

问题描述

我有一个Angular 7应用程序，在其中有一个开机自检功能，根据该通话后响应，我想使后卫处于活动状态/非活动状态.我有这样的路线守卫

I have an Angular 7 app in which I have a post call and on the basis of that post call response I want to make guard active/inactive. I have my route guard like this

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，并且此响应来自于后调用.如何管理这种情况，以便根据http post呼叫响应将路由设置为true或false.

But problem is that while my http post call is being in progress so my guard executes completely and returning false and after that response is coming from post call. How can I manage this scenario so I will make route true or false based on http post call response.

推荐答案

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

If you want to make an Http request inside your canActivate function, you need to return an Observable<boolean> instead of a boolean, since you are now performing an asynchronous action.

并且由于要在失败时导航，因此应该返回Observable<boolean | UrlTree>.

And since you want to navigate on fail, you should return Observable<boolean | UrlTree> instead.

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请求(路由器将通过订阅来调用它)，并将响应映射到

We are returning the observable http request (the router will invoke it by subscribing), and mapping the response to either a

• true-路由器可以进入受保护的路由
• UrlTree-路由器应导航到我们返回的路线

• true - the router may proceed to the guarded route
• UrlTree - the router should navigate to the route we have returned

如果将其应用于您的示例，由于您还有其他服务电话，我们需要在管道中做更多的工作.

If we apply this to your example, we need to do a bit more work in the pipe, as you have an additional service call.

// 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内部执行异步调用，以及如何允许路由器导航或返回替代路线以导航到.

There are some service calls in there that I'm assuming are synchronous. This answer demonstrates how you perform an asynchronous call inside canActivate and either allow the router to navigate or return an alternative route to navigate to.

这篇关于如何在angular7的路由保护器中进行http发布呼叫?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！