Canactivate Guard угловой 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);
  }
}

Мой код аутентификации

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 запросы.