Hello!
I have a login.component.ts . Here is his code:
import { Component } from "@angular/core"; import { AuthenticationService } from "../services/authentication.service"; @Component({ selector: "login", templateUrl: "app/login/login.component.html", styleUrls: ['../../style.css'], providers: [AuthenticationService] }) export class LoginComponent{ constructor(private authenticationService: AuthenticationService){ } login(value: any){ this.authenticationService.login(value); } } The completed data in the form is sent to the service authentication.service.ts . Here is his code:
import { Injectable } from '@angular/core'; import { Http, Response, Headers } from '@angular/http'; import { Observable } from 'rxjs/Rx'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { ReplaySubject } from 'rxjs/ReplaySubject'; import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import { AppConfig } from '../app.config'; import { Router } from '@angular/router'; import { User } from '../models/user.model'; import { JwtService } from './jwt.service'; import { ApiService } from './api.service'; @Injectable() export class AuthenticationService { constructor(private http: Http, private appConfig: AppConfig, private jwtService: JwtService, private apiService: ApiService, private router: Router) { } public currentUserSubject: Subject<any> = new BehaviorSubject(new User()); public isAuthenticatedSubject: Subject<any> = new ReplaySubject(1); getUser() { return this.currentUserSubject.asObservable(); } getIsAuthenctication(): Observable<boolean> { return this.isAuthenticatedSubject.asObservable(); } checkAuth() { if (this.jwtService.getToken()) { this.apiService.getUserByToken().subscribe( data => { this.setAuth(data.user) }, err => { this.logout(); } ) } else { this.logout(); } } setAuth(user: User) { this.currentUserSubject.next(user); this.isAuthenticatedSubject.next(true); this.jwtService.setToken(user.token); console.log(this.currentUserSubject); console.log(this.isAuthenticatedSubject); } login(user: User) { this.http.post(this.appConfig.urlServer + "/auth/login", user) .map((res) => { return res.json(); }) .catch((error) => Observable.throw(error.json().error || 'Server error')) .subscribe( (data) => { this.currentUserSubject.next(data.user); this.isAuthenticatedSubject.next(true); this.jwtService.setToken(data.user.token); console.log(this.isAuthenticatedSubject); console.log(this.currentUserSubject); this.router.navigate(['']); }, (err) => console.error("loadAllPackages: ERROR"), () => console.log("loadAllPackages: always") ); } logout() { this.jwtService.removeToken(); this.currentUserSubject.next(new User()); this.isAuthenticatedSubject.next(false); } } In currentUserSubject I add data about the user who successfully entered.
I add isAuthenticatedSubject true if the user has successfully logged in, and false if he has not logged in.
If the token is in the local storage, then the currentUserSubject and isAuthenticatedSubject are not empty. If the local storage is empty, neither the data nor the boolean value is added to the currentUserSubject and isAuthenticatedSubject, respectively.
What could be the reason ?
[providers]in the componentlogin.component.ts- Alexey Korkoza