角度 - 条件付きの経路のみ（ローカルストレージに基づく）

Question

私は基本的なルーティングモジュールを使用して角型アプリケーションを使用しています。以下に私の定義したルートを示します：

... 
const routes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'dashboard', component: DashboardComponent } 
]; 
... 

今私はダッシュボードルートを保護したいと思います。 localStorageという名前のオブジェクトがtokenの場合にのみルーティングします。どうしたらいいですか？

var local = JSON.parse(localStorage.getItem('token')); 

のようなもの：チェックされることになっていた場合 https://angular.io/api/router/CanActivate

canActivateメソッドはboolean型を返すことができます：あなたはCanActivateインタフェースを実装し、ルートガードでそれを行うことができます

... 
const routes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'dashboard', checkLogin, component: DashboardComponent } 
]; 
... 
function checkLogin(){ 
    // do the logic 
} 

Answer 1

角度経路ガードを使用する必要があります。

import { CanActivate } from '@angular/router'; 
 

 
class DashBoardGuard implements CanActivate { 
 
    canActivate() { 
 
    if (// your condition) { 
 
     return true; // all fine 
 
    } else {//maybe redirect somwhere} 
 
    } 
 
    
 
} 
 

 
// in your routes 
 
... 
 
{path: 'dashboard', canActivate: {[DashBoardGuard]}

私は複数のルートのためにそれを行うことができますどのようにガード

Answer 2

を非同期であれば同期的に、または約束/可観測であれば可能です。とにかく、あなたの場合、単にトークンに基づいてtrueまたはfalseを返すようにlocalStorageをチェックしているだけです。