Angular 4 CanActivate guard 不加载与服务一起使用的组件；简单 Observable.of(true) 有效

Question

我正在尝试在 Angular 中使用 CanActivate 防护，当我从它调用服务时它不起作用 return true 甚至 return Observable.of(true);

但是当我不调用任何服务而只写时它可以工作并加载组件 Observable.of(true); 在 canActivate

以下是最有效的代码：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    //return Observable.of(true);
    return this._userService.verify().subscribe((result: Array<Object>) => {
        let user : UserDetail = new UserDetail();
        Object.keys(user).forEach(key=>{
             let listValue = result.filter(m=>m["m_type"]==key);
             if(listValue.length>0){
                user[key] =  result.filter(m=>m["m_type"]==key)[0]["m_value"];
             }
        });
        this.userDetails = user;
        return Observable.of(true);
        //return true;
    }, (error: any) => {
        // error when verify so redirect to login page with the return url
        this._router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return true;
    }, () => {
        console.log("auth.guard : completed.");
        //return true;
        return Observable.of(true);
    });

以下代码有效：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

            return Observable.of(true);
        });

Answer 1

Observable 不承诺订阅中的任何 return 代码都不起作用。将代码更改为此。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
//return Observable.of(true);
return this._userService.verify().switchMap((result: Array<Object>) => {
    let user : UserDetail = new UserDetail();
    Object.keys(user).forEach(key=>{
         let listValue = result.filter(m=>m["m_type"]==key);
         if(listValue.length>0){
            user[key] =  result.filter(m=>m["m_type"]==key)[0]["m_value"];
         }
    });
    this.userDetails = user;
    return Observable.of(true);
    //return true;
}).catch(() => {

    // error when verify so redirect to login page with the return url
    this._router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return Observable.of(false);


});

当你let x = this.observable.subscribe(); x 是订阅但不可观察。

Angular 4 CanActivate guard 不加载与服务一起使用的组件；简单 Observable.of(true) 有效

Angular 4 CanActivate guard doesnt load component with used with service; simple Observable.of(true) works

node.js

typescript

angular-services

angular-components

angular