canActivateのリンクにリダイレクトしたときにAngular2 + redirectToが機能しない

Question

redirectToは、ログインしたときcanActivateのリンクにリダイレクトできませんでした。

redirectToは私がログアウトしたときにログインした後、それは

。 /indexに私の /loginコンポーネントと redirectToをredirectToしかし、私がログインしていたときに、それは ''に固執正常に動作します。

authGuardにconsole.logを追加しました。リダイレクトURL「/ index」は、開発ツールでクラッシュすることなくスティックで''の状況に移行しました。

コメント後、canActivateのように、redirectToは以前のようにうまく機能します。ところで

、他の状況でcanActivate作業罰金と私のauthGuard（redirecToを除外）

ここに私のアプリ-routing.module.tsは

/* import... */ 

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: '', redirectTo : '/index', pathMatch: 'full' }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

/* ngmodel and export ... */ 

だとここで私のインデックスrouting.moduleです。 TS

/* import ... */ 

const indexRoutes: Routes = [ 
    { 
     path: 'index', 
     component: IndexComponent, 
     canActivate: [AuthGuard], //<- if comment this will work 
    }, 
]; 

/* ngmodel and export ... */ 

は、ここに私のauth-guard.module.tsだ

/* import ... */ 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(
     private authService: AuthService, 
     private router: Router 
    ) { } 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     let url: string = state.url; 
     //redirectTo did get in here 
     console.log(url); //<-- this show /index 

     return this.checkLogin(url); 
    } 

    checkLogin(url: string): boolean { 
     if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) { 
      return true; 
     } 
     this.authService.get_login_data() 
     .subscribe(
      data => { 
       this.authService.login_data = data; 
       if (data.userprofile || !data.need_login) { 
        return true; 
       } 
       this.authService.redirectUrl = url; 
       this.router.navigate(['/login']); 
       return false; 
      }, 
      error => { this.authService.errMsg = <any>error;} 
     ); 
    } 
} 

ちなみに私はangular4.0.1にプロジェクトを更新しました

ありがとうございました。

UPDATE：

私が観察可能

にブールから私のガードリターンを変更しましたが、それはまだ動作しません。

ここに私が使用したコードがあります。私のコンソールで

checkLogin(url: string): Observable<boolean> { 
     if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) { 
      console.log('gonna return observable true'); 
      return Observable.of(true); 
      //return true; 
     } 
     this.authService.get_login_data() 
     .subscribe(
      data => { 
       this.authService.login_data = data; 
       if (data.userprofile || !data.need_login) { 
        console.log('in subscribe and gonna return observable true'); 
        return Observable.of(true); 
        //return true; 
       } 
       this.authService.redirectUrl = url; 
       this.router.navigate(['/login']); 
       return Observable.of(false); 
       //return false; 
      }, 
      error => { this.authService.errMsg = <any>error;} 
     ); 
    } 

は、私が得たin subscribe and gonna return observable true

UPDATE：

チェックした後、この

AuthGuard doesn't wait for authentication to finish before checking user

を確認した後に問題がcanActivateが待機していないのかもしれサブスクライブ終了。あなたAuthGuardのcheckLogin()で

Answer 1

：

checkLogin(url: string): boolean { 
    if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) { 
     return true; 
    } 
    this.authService.get_login_data() 
    .subscribe(
     data => { 
      this.authService.login_data = data; 
      if (data.userprofile || !data.need_login) { 
       return true; 
      } 
      this.authService.redirectUrl = url; 
      this.router.navigate(['/login']); 
      return false; 
     }, 
     error => { this.authService.errMsg = <any>error;} 
    ); 
} 

それはだ戻り値の型は、それは大丈夫です、それはいくつかの条件では、trueを返し、ブール値です。しかし、後の部分には問題があります。結果を購読し、その結果に基づいて返品するまで、あなたは何も返しませんでした。

つまり、この関数はundefinedを返します。つまり、canActivateチェックは機能しません。

[更新]結果からユーザーデータを設定する場合は、にdo()を設定してください。結果を購読すると、この 'do'関数が呼び出されます。 checkLogin()ではsubscribe()の代わりに.map()を使用して、ログイン結果データをブール値にマッピングします。この状況で

のように、あなたは、観察可能なタイプを返す必要があります：私はマップするためにサブスクライブ変更することで、私の問題を解決してきました

checkLogin(url: string): Observable<boolean> { 
if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) { 
    return Observable.of(true); // wrap true in Observable 
} 
return this.authService.get_login_data() 
.map(
    data => { 
     if (data.userprofile || !data.need_login) { 
      return true; 
     } 
     this.authService.redirectUrl = url; 
     this.router.navigate(['/login']); 
     return false; 
    }, 
    error => { this.authService.errMsg = <any>error;} 
); 

}

Answer 2

。

Angular2 canActivate() calling async function

ここで編集した後に私のコードです。ヘルプや提案のための私は（真の）観測可能返す場合、私はエラーを得たマップで

checkLogin(url: string): Observable<boolean>|boolean { 
    if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) { 
     console.log('gonna return observable true'); 
     return Observable.of(true); 
    } 
    return this.authService.get_login_data() 
    .map(
     data => { 
      this.authService.login_data = data; 
      if (data.userprofile || !data.need_login) { 
       console.log('in subscribe and gonna return observable true'); 
       //return Observable.of(true); 
       return true;                                     
      } 
      this.authService.redirectUrl = url; 
      this.router.navigate(['/login']); 
      //return Observable.of(false); 
      return false; 
     }, 
     error => { this.authService.errMsg = <any>error;} 
    ); 
} 

Type 'Observable<Observable<boolean>>' is not assignable to type 'boolean | Observable<boolean>'.

感謝。