angular2の経路に関する質問

Question

角度ルータの公式の例を以下に示します。

私はこのような要件がある場合は https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles https://angular.io/resources/live-examples/router/ts/plnkr.html

：ユーザーがログインしていないとき、彼は絵の2行目のトップバー（メニューリストを見ることができないをすべき彼がログインした後、一番上のバーが見えるだけですが、私はこれについてたくさん考えましたが、解決策を見つけることができません。私はcanActiveフックを使ってそれを制御する方法を知りません。 u。

import { Component } from '@angular/core'; 

@Component({ 
selector: 'my-app', 
template: ` 
<h1 class="title">Angular Router</h1> 
<nav> 
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> 
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 
    <a routerLink="/admin" routerLinkActive="active">Admin</a> 
    <a routerLink="/login" routerLinkActive="active">Login</a> 
</nav> 
<router-outlet></router-outlet> 
` 
}) 
export class AppComponent { 
} 

私はどこか別の場所に取得し、私の目標を達成するためのログイン状況を記録し、ルートからかなければならないthis.Whereのような構造の私question.Whenユーザーロード]ページの詳細明確にしましょうか？

Answer 1

さんがあなたのapp.component.html

<navigation-bar></navigation-bar> 
<router-outlet></router-outlet> 

仮に、次のコードを持っていると仮定しましょう、と、ユーザが直接、別のページにリダイレクトされます。これが私が<router-outlet>と書いた理由です。たとえば、ユーザーがurlに移動したときに、ユーザーがログインしていない場合は、ログインコンポーネントにリダイレクトできます。その後、公式の角書類に記載されているように共有サービスを作成します。

//component-communicator.service.ts 
export class ComponentCommunicatorService{ 
    private _showNavBar: Subject<booelan> = new Subject<boolean>; 
    public showNavBar$ = this._showNavBar.asObservable(); 

    public showNavBar(value: boolean){ 
      this._showNavBar.next(value); 
    } 
} 

あなたのapp.moduleからこのサービスを他のコンポーネントに提供することができます。

//app.module.ts 
... 
@NgModule({ 
    ... 
    providers: [ 
      ... 
      ComponentCommunicatorService, 
      ... 
    ] 
}) 
export class AppModule{} 

ナビゲーションbar.component.tsでは、次のコードでshowNavBarフィールドを持つことになります。ここで

//navigation-bar.component.ts 
export class NavigationBarComponent { 
    public showNavBar: boolean = false; 
    constructor(private componentCommunicatorService: ComponentCommunicatorService, ...){ 
      this.componentCommunicatorService.showNavBar$.subscribe((value: booelan) => { 
       this.showNavBar = value; 
      }); 
    } 
} 

あなたの仕事はshowNavBar$フィールドに加入しています。あなたは、アプリケーションの任意の場所にshowNavBar$の値を更新するたびに、NavigationBarComponentクラスの加入者は、この状況自体を扱う、ということ提供することにより：

//navigation-bar.component.html 
<nav *ngIf="showNavBar"> 
    ... 
</nav> 

例えばlogin.componentでは、あなたはそのようなナビゲーションバーを表示することができます。アプリケーションの開始時に

//login.component.ts 
export class LoginComponent { 
    constructor(private componentCommunicatorService: ComponentCommunicatorService, ...){ 
      ... 
    } 

    onLoginSubmit(/*params*/){ 
      yourService.login(/*params*/).subscribe((response) => { 
       //do whatever you want 
       this.componentCommunicatorService.showNavBar(true); 
      }); 
    } 
} 

NavigationBarComponentクラスのshowNavBarの値がfalseであるため、ユーザーは、ナビゲーションバーを表示することはできません。ユーザーがログインしているかどうかを自分のコントロールで確認することで、showNavBar$フィールドを更新できます。

ご不明な点がありましたら、今後の質問にお答えください。

Answer 2

変数（ブール値）を使用して、ユーザーの状態（ユーザーがログインしているかどうか）を保持できます。次に、バーを非表示にするには*ngIfを使用できます。例

<div *ngIf = "loggedIn"> 
<-- this includes the bar you want to hidden--> 
</div> 

ユーザーがログインしている間、あなたの.tsファイル内の値loggedInを設定することができます。最初はfalseとしてそれを維持するための

。

私はccess tokenと認証サービスを使用したい:)

Answer 3

コーディング楽しむ...これはあなたの..歓声のために参考になると思います。私のお気に入りはこれは、私が何をすべきか、ユーザがログイン中のローカルストレージに認証トークンを設定し

である。これはauth0を使用しているが、同じ原理が適用されauth0

です。あなたは、私がこれを行うlocalstorage

でトークンがあることをauth0

auth.service.ts今

constructor(private router: Router, private http: Http) { 
    this.userProfile = JSON.parse(localStorage.getItem('profile')); 
    this.lock.on('authenticated', (authResult: any) => { 
     localStorage.setItem('access_token', authResult.idToken); 
     this.lock.getProfile(authResult.idToken, (error: any, profile: any) => { 
     if (error) { 
      console.log(error); 
      return; 
     } 

public authenticated(): boolean { 
    try { 
     var jwtHelper: JwtHelper = new JwtHelper(); 
     var token = this.accessToken; 
     if (jwtHelper.isTokenExpired(token)) 
      return false; 
     return true; 
    } 
    catch (err) { 
     return false; 
    } 
    } 

を使用したくない場合は、認証を自分でトークン作成することができますcomponent.html

<span *ngIf="auth.authenticated() && auth.userProfile" class="profile-name">{{auth.userProfile.nickname}}</span> 
      <span *ngIf="!auth.authenticated() && !auth.userProfile" class="profile-name">Account</span> 

Answer 4

これを行う方法は複数あります。 localstorageを使用すると、一度ログインした後、その変数に基づいてヘッダーを表示/非表示にすることができます。そして、ログアウトボタンをクリックするとステータスが変わります。

私が間違っているかどうか教えてください。

これがうまくいくと思います。ユーザーがURLを打ったとき