現在のナビゲーションをキャンセルしてルートコンポーネントから別の場所に移動することはできません

Question

ユーザが自分のアプリケーションにログインしていない場合、localStorageに 'userToken'が存在しない場合、ログインルートにリダイレクトしたいだけです。

ユーザーがルート/customersを入力すると、ローカルストレージにuserTokenが存在しないときにログイン画面にリダイレクトする必要があります。

App.component.ts

export class AppComponent 
{ 
    constructor(private routerService: RouterService, private router: Router, private authService: AuthenticationService) 
    { 
    if (!authService.isLoggedIn()) 
    { 
     this.router.navigate(['/login']); 
    } 
    } 
} 

ルータNavigateメソッドが呼び出されますが、ログイン画面に移動されていない、なぜ？バックエンドの顧客データを取得しようとしていますが、サーバーの応答に401が表示されます。これは、ルートアプリケーションコンポーネントが実行された後のコードを意味します。

Answer 1

角度2チェックユーザーへ

最良の方法は、ログインであるかどうか、この

{ path: 'customers', component: AppComponent, canActivate: [AuthService] } 

のように定義して、今のAuthServiceにあなたが定義されてすることができます方法のルートで「canActivate」を使用することができますroute.youを通過する前に

canActivate() { 
     //you can check token is exists or not here 
     if (localstorage.getItem('user')) { 
      return true; 
     } else { 
      this.router.navigate(['login']); 
      return false; 
     } 
    } 

詳細h ttps://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html

Answer 2

このコードは動作しません。

if (!authService.isLoggedIn()) 
{ 
    this.router.navigate(['/login']); 
} 

あなたは事前にユーザーを事前認証する必要があります。しかし、まだ定義されていないサービスの状態をチェックしています。