angular2 - ユーザーのログインを確認してください

私は角度2について学び始めていますが、現在問題があります。ユーザーが認証情報を入力した後angular2 - ユーザーのログインを確認してください

const appRoutes: Routes = [ 
    {path: 'start', 
    component: StartComponent, 
    children:[{path: '' }, 
     { 
     path:'nested', component:NestedTestComponent 
     } 
    ]}, 
    {path: '', component:LoginFormComponent} 
];

は（と彼らが正しい）、ユーザが「開始」するように指示され、ログインフォームを示し、「ベース」のパスがあります：私は自分のアプリケーションにこれらのルートを定義しましたこれはネストされたルート "ネストされた"ルートです。これは素晴らしいです。しかし、ユーザーがログインしていなければ、 "開始"と "入れ子"にアクセスするようにユーザーを制限する必要があります。これは現在URLとして入力するだけで可能です。

私のindex.htmlは次のようになります。

<body> 
    <app-root>Loading...</app-root> 
</body>

app.component：すべては何とか私のアプローチにあったネストされているので

@Component({ 
    selector: "app-root", 
    template: ` 
     <router-outlet></router-outlet> 
     `, 
    styleUrls: ['./app.component.css'] 
})

start.component

<nav> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo center"></a> 
     <ul id="nav-mobile" class="right hide-on-med-and-down"> 
     <li><a (click)="logout()">Logout</a></li> 
     </ul> 
    </div> 
    </nav> 
    <router-outlet></router-outlet>

ユーザーがこれでログインしている場合、app.componentをチェックインする：

export class AppComponent { 



    constructor(af:AngularFire, router:Router){ 
    if(af.auth.getAuth() == null){ 
     //redirect to start 
     console.log('redirect to login'); 
     router.navigate(['']); 
    }else{ 
     console.log('not redirect to login'); 
    } 
    } 
}

これは正しく動作し、ユーザーをリダイレクトするかどうかを正しく検出します。ただし、router.navigate(['']);は機能しません。それは何もしません。

出典

2016-09-25 user2529173

use CanActivateを使用すると、ルート上でアクティベートされているか、ログインにリダイレクトされている場合にのみ、ユーザーがページにアクセスできるようにすることができます。

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { CanActivateAuthGuard } from './auth.service' 

import { MyComponent } from './app.component'; 

const routes: Routes = [ 
    { path: '/home', component: MyComponent , canActivate: [CanActivateAuthGuard]}]

認証サービスで

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

@Injectable() 
export class CanActivateAuthGuard implements CanActivate { 
    constructor(private router: Router) {} 
    if (this.authService.isLoggedIn()) { 
     return true; 
    } 
    //Redirect the user before denying them access to this route 
    this.router.navigate(['/login']); 
    return false; 
}

出典

2016-09-25 08:36:41 Manish

あなたは答えの*に*の例を提供してもらえますか？独自のリンクは有用ではありません（http://meta.stackexchange.com/questions/225370/your-answer-is-in-another-castle-when-is-an-answer-not-an-answer ）。 – jonrsharpe

'{angle/core'から{ModuleWithProviders}をインポートします。 'Route、RouterModule}を' @ angular/router 'からインポートします。 'CanActivateAuthGuard'から './auth.service'をインポートします。 {MyComponent}を './app.component'からインポートします。のconstルート：ルート= [ {パス： '/ホーム'、コンポーネント：MyComponentという、canActivate：[CanActivateAuthGuard]}] /*認証サービスで*/ – Manish

**答えに**それを編集してください。 – jonrsharpe

angular2 - ユーザーのログインを確認してください

答えて

関連する問題