有關angular2路由的問題

Question

以下是角路由器的官方示例。 https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles https://angular.io/resources/live-examples/router/ts/plnkr.html

如果我有這樣的要求：如果用戶沒有登錄，他看不到頂欄（圖片的第二排菜單列表應被隱藏），只有在他登錄後，頂部欄纔可見，我想了很多關於這個，但無法找到解決方案。我不知道如何使用canActive鉤來控制它，任何人有一個想法，請告訴我，謝謝ü。

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 { 
} 

讓我對結構的我question.When用戶加載頁面像this.Where我應該得到和記錄登錄狀態，以實現我的目標，從路線或其他地方更清楚了嗎？

Answer 1

讓我們假設你有下面的代碼在你的app.component.html

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

可以想像，當用戶打URL，用戶直接重定向到另一個頁面。這就是爲什麼我把<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$領域。通過提供，只要你在你的應用程序，用戶的任何地方NavigationBarComponent類更新showNavBar$值處理這種情況本身：

//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); 
      }); 
    } 
} 

在應用程序的開始，因爲在showNavBar類NavigationBarComponent的值爲false，用戶將無法看到導航欄。通過檢查用戶是否已登錄，您可以更新showNavBar$字段。

我希望它可以幫助，請讓我知道，如果你遇到任何進一步的問題。

Answer 2

您可以使用一個變量（布爾），以確保用戶的狀態（用戶登錄或沒有）。然後你可以用它*ngIf隱藏欄。

例如

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

而用戶登錄您可以在.ts文件中設置的值loggedIn的。最初保持爲假。

我認爲這將是對你..歡呼很有幫助...享受編碼:)

Answer 3

我喜歡使用的身份驗證服務與一個ccess token。我最喜歡的是auth0

這是我做的，

設置身份驗證令牌到本地存儲時，這是使用auth0用戶登錄，但同樣的原則也適用。您可以創建一個身份驗證令牌自己，如果你不想使用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; 
    } 
    } 

現在有在localstorage

我做這個令牌在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在登錄後將登錄狀態保存在一個變量中，並根據該變量隱藏/顯示標題。一旦你點擊註銷按鈕改變狀態。

如果我理解錯了，請讓我知道。

希望這會爲你工作。