Angular2 - ログイン後にリダイレクト

Question

ログイン後に別のルート上で自分のユーザーをナビゲートしたい。それは私をリダイレクトしませんただし

// imports on top 
import { Component } from '@angular/core'; 
import { LoginService } from './login.service'; 
import { Router } from '@angular/router'; 

// method somewhere below 
login(event, username, password) { 
    event.preventDefault(); 
    let body = JSON.stringify({ username, password }); 

    this.loginService.login(body) 
     .then(res => localStorage.setItem('token', res.msg)) 
     .catch(error => this.error = error); 

    this.router.navigate(['/users']); 
} 

：compoenentで

this.router.navigate(['/users']); 

私の完全な方法は、次のようになります。

は、私はこのような何かが正しくそれのために働く必要があることを文書で分かりました。基本的にルートは変更せずにそのまま残り、コンソールにはエラーは表示されません。

私は間違っていますか？

編集：私のAuthGuardがどのように見える

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent}, 
    // users route protected by auth guard 
    { path: 'users', component: UsersComponent, canActivate: [AuthGuard] }, 
    // { path: 'user/:id', component: HeroDetailComponent }, 
    { path: '**', redirectTo: 'users' } 

]; 

： 私のルートのように見えます

export class AuthGuard implements CanActivate { 

    constructor(private router: Router) { } 

    canActivate() { 
    if (localStorage.getItem('token')) { 
     // logged in so return true 
     return true; 
    } 

    // not logged in so redirect to login page 
    this.router.navigate(['/login']); 
    return false; 
    } 
} 

Answer 1

this.router.navigate（[ '/ユーザー']）; この（localStorage.setItem後に呼び出される必要があります）、.then内部（）関数

それはまだ動作しない場合は、あなたがあなたのメッセージにしてください

Answer 2

のクラスのコードを入れて、私が持っていました私のpostで非常に似た問題。問題は、ユーザーの認証に遅延がありますが、router.navigateが即座に実行されることです。サイトのユーザー部分が保護され、技術的にはまだ認証されていないため、リダイレクトに失敗します。

.thenにリダイレクトすると、ユーザーがログインするのを待ってから、成功するとユーザーをリダイレクトします。

はこれを使用してみてください：それがfalseの場合

this.loginService.login(body) 
     .then(
      res => localStorage.setItem('token', res.msg) 
      this.router.navigate(['/users']); 
     ) 
     .catch(error => this.error = error);