角2-路由-CanActivate工作与观察

Question

我有一个实现CanActivate的AuthGuard（用于路由）。

canActivate() {
    return this.loginService.isLoggedIn();
}

我的问题是，CanActivate结果依赖于超文本传输协议-get结果-登录服务返回一个可观察的。

isLoggedIn():Observable<boolean> {
    return this.http.get(ApiResources.LOGON).map(response => response.ok);
}

我如何将它们结合在一起-使CanActivate依赖于后端状态？

编辑：请注意，这个问题是从2016年开始的-已经使用了角度/路由器的一个非常早期的阶段。

Answer 1

canActivate（）接受可观察的

您可以使用. map运算符来转换可观察的

canActivate(){
    return this.http.login().map((res: Response)=>{
       if ( res.status === 200 ) return true;
       return false;
    });
}

Answer 2

更新Kery Hu对Angular 5和RxJS 5.5的回答，其中catch操作符不受欢迎。现在，您应该将catchError操作符与管道和出租操作符结合使用。

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { catchError, map} from 'rxjs/operators';
import { of } from 'rxjs/observable/of';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private loginService: LoginService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {
    return this.loginService.isLoggedIn().pipe(
      map(e => {
        if (e) {
          return true;
        } else {
          ...
        }
      }),
      catchError((err) => {
        this.router.navigate(['/login']);
        return of(false);
      })
    );
  }   
  
}

Answer 3

您应该将“@angular/router”升级到最新版本。e、 g.“3.0.0-alpha.8”

修改AuthGuard。ts

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private loginService: LoginService, private router: Router) {}

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.loginService
            .isLoggedIn()
            .map((e) => {
                if (e) {
                    return true;
                }
            })
            .catch(() => {
                this.router.navigate(['/login']);
                return Observable.of(false);
            });
    }
}

如果你有任何问题，问我！