canactivate guard angular 2

Question

我有一個有兩個組件「登錄」和「家」的角度應用程序。我想要保護家庭組件，直到用戶登錄。

我有一個服務，它有一個布爾變量「isUserLoggedIn」。根據這個變量的值，我保護我的組件。

網絡服務 -

import { Injectable } from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import { Observable } from 'rxjs/Observable'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 

@Injectable() 
export class NetworkService { 

private isUserLoggedIn = false; 

constructor(private _http:Http) { 

    } 

getUserLoggedIn(){ 
    console.log("network service ... isUserLoggedIn = "+this.isUserLoggedIn); 
    return this.isUserLoggedIn; 
    } 

setUserLoggedIn(){ 
    this.isUserLoggedIn = true; 
    console.log("service layer : setUserLoggedIn called .... isUserLoggedIn = "+this.isUserLoggedIn); 
    } 
} 

我的auth-後衛代碼

import { NetworkService } from './../services/network.service'; 
import { Router,CanActivate } from '@angular/router'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class AuthGuard implements CanActivate{ 
    constructor(private networkservice:NetworkService, private router:Router){ 

    } 

    canActivate(){ 
     console.log("canActivate called : userLoggedIn = "+this.networkservice.getUserLoggedIn()); 
     if(this.networkservice.getUserLoggedIn()){ 
      return true; 
     } 
     else{ 
      this.router.navigate(['/login']); 
      return false; 
     } 
    } 
} 

登錄組件

import { Component, OnInit } from '@angular/core'; 
import { NetworkService } from './../services/network.service'; 
import { Router } from '@angular/router'; 


@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'], 
    providers : [NetworkService] 
}) 
export class LoginComponent implements OnInit { 

    constructor(private networkservice : NetworkService, private router: Router) { 

    } 

    ngOnInit() { 
    } 

    onSubmit(value:any){ 
    console.log("user = "+value.username+" password = "+value.password); 
    if(value.username == "user" && value.password == "user"){ 

     this.networkservice.setUserLoggedIn(); 
     this.router.navigate(['/home']); 

    } 
    else{ 
     alert("Username or Password did not match !!!"); 
    } 
} 

} 

路由器

import { AuthGuard } from './guards/auth.guard'; 
import { LoginComponent } from './login/login.component'; 
import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 

export const router: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent, canActivate:[AuthGuard]}, 
]; 

export const routes: ModuleWithProviders = RouterModule.forRoot(router); 

最後我的應用程序模塊

import { AuthGuard } from './guards/auth.guard'; 

..... 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    LoginComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    JsonpModule, 
    DataTablesModule, 
    Ng2UploaderModule, 
    routes 
    ], 
    providers: [NetworkService,AuthGuard], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

現在我使用的用戶名和密碼硬編碼的文本。

我的問題是，即使在登錄組件將服務的「isUserLoggedIn」變量設置爲「true」之後，auth-guard仍然認爲它爲false。因此我無法導航到「主頁」組件。

Answer 1

發生這種情況是因爲您有多個NetworkService實例，因此每個實例可以有不同的登錄狀態。

應該僅在您的根AppModule的提供程序數組中添加旨在成爲單件（服務整個應用程序的單個實例）的服務。

您的問題是，您還添加了服務LoginComponent。所以，僅僅從組件刪除此行：

@Component({ 
    providers : [NetworkService] // <-- DELETE or this will create a new instance. 
}) 

一旦走了，是被在構造函數中注入的NetworkService將是相同的實例作爲NetworkService的AuthGuard查詢。