2017-12-15 8 views
0

Ich habe Probleme damit, dass mein BehaviorSubject seinen neuen Wert nicht an meine Beobachter weiterleitet. Ich habe dieses Tutorial https://netbasal.com/angular-2-persist-your-login-status-with-behaviorsubject-45da9ec43243 gefolgt, aber kein Glück dort. Ich habe auch versucht, etwas über SO und dr zu finden. Google, aber auch kein Glück. Ich habe keine Ahnung, was ich falsch mache.Ich erhalte den korrekten Wert von BehaviorSubject nicht, wenn ich keine Seite aktualisiere

Hier ist mein Code für meinen Authservice und Komponenten, die damit interagieren.

AuthenticationService

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

@Injectable() 
export class AuthenticationService { 
    private _url = '/api'; 
    private _user$: BehaviorSubject<string>; 
    private _isLoggedIn: BehaviorSubject<boolean>; 

    public redirectUrl: string; 

    constructor(private http: Http) { 
    const currentUser = JSON.parse(localStorage.getItem('currentUser')); 
    this._user$ = new BehaviorSubject<string>(currentUser && currentUser.email); 
    this._isLoggedIn = new BehaviorSubject<boolean>(this.hasUser()); 
    } 

    get user$(): BehaviorSubject<string> { 
    return this._user$; 
    } 

    isLoggedIn(): Observable<boolean> { 
    return this._isLoggedIn.asObservable(); 
    } 

    hasUser() { 
    return !!localStorage.getItem('currentUser') 
    } 

    get token(): string { 
    const localCurrentUser = JSON.parse(localStorage.getItem('currentUser')); 
    return !!localCurrentUser ? localCurrentUser.token : ''; 
    } 

    login(email: string, password: string): Observable<boolean> { 
    return this.http.post(`${this._url}/login`, { email: email, password: password }) 
     .map(res => res.json()).map(res => { 
     const token = res.token; 
     if (token) { 
      localStorage.setItem('currentUser', JSON.stringify({ email: email, token: token })); 
      this._user$.next(email); 
      this._isLoggedIn.next(true); 
      return true; 
     } else { 
      return false; 
     } 
     }); 
    } 

    logout() { 
    if (this.user$.getValue()) { 
     localStorage.removeItem('currentUser'); 
     setTimeout(() => this._user$.next(null)); 
     this._isLoggedIn.next(false) 
    } 
    } 

    register(email: string, password: string): Observable<boolean> { 
    return this.http.post(`${this._url}/register`, { email: email, password: password }) 
     .map(res => res.json()).map(res => { 
     const token = res.token; 
     if (token) { 
      localStorage.setItem('currentUser', JSON.stringify({ email: email, token: res.token })); 
      this._user$.next(email); 
      this._isLoggedIn.next(true)  
      return true; 
     } else { 
      return false; 
     } 
     }); 
    } 
} 

nav.component.ts

import { Observable } from 'rxjs/Rx'; 
import { Component, OnInit } from '@angular/core'; 
import { AuthenticationService } from '../user/authentication.service'; 

@Component({ 
    selector: 'app-nav', 
    templateUrl: './nav.component.html', 
    styleUrls: ['./nav.component.css'], 
    providers: [AuthenticationService] 
}) 
export class NavComponent implements OnInit { 
    private _isLoggedIn: Observable<boolean> 

    constructor(private auth: AuthenticationService) { 
     this._isLoggedIn = auth.isLoggedIn(); 
    } 

    ngOnInit() { 
    } 

    get isLoggedIn() { 
    return this._isLoggedIn 
    } 

} 

nav.component.html nur das Problem Code *

<li class="nav-item" *ngIf="!(isLoggedIn | async)"><a class="nav-link" href="#" 
     routerLink="/login">Login</a></li> 
     <li class="nav-item" *ngIf="!(isLoggedIn | async)"><a class="nav-link" href="#" 
     routerLink="/register">Register</a></li> 
     <li class="nav-item" *ngIf="(isLoggedIn | async)"><a class="nav-link" href="#" 
     routerLink="/logout">Logout</a></li> 
    </ul> 

navcomponent Teil der App-Modul und authservice ist Teil des Anwendermoduls

user.module.ts

import { AuthGuardService } from './auth-guard.service'; 
import { AuthenticationService } from './authentication.service'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { LoginComponent } from './login/login.component'; 
import { LogoutComponent } from './logout/logout.component'; 
import { RegisterComponent } from './register/register.component'; 
import {RouterModule, Routes} from '@angular/router'; 


const userRoutes: Routes = [ 
    {path: 'login', component: LoginComponent}, 
    {path: 'register', component: RegisterComponent}, 
    {path: 'logout', component: LogoutComponent} 
]; 

@NgModule({ 
    imports: [ 
    HttpModule, 
    ReactiveFormsModule, 
    CommonModule, 
    RouterModule.forChild(userRoutes) 
    ], 
    declarations: [ 
    LoginComponent, 
    LogoutComponent, 
    RegisterComponent 
    ], 
    providers: [ 
    AuthenticationService, 
    AuthGuardService 
    ] 
}) 
export class UserModule { } 

app.module.ts

import {HttpModule} from '@angular/http'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import {AppComponent} from './app.component'; 
import {NavComponent} from './nav/nav.component'; 
import {AppRoutingModule} from './app-routing/app-routing.module'; 
import {NavdropdownDirective} from './nav/navdropdown.directive'; 
import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; 
import {RegistrationModule} from './registration/registrations.module'; 
import {ScheduleModule} from './schedule/schedule.module'; 
import {PreferencesModule} from './preferences/preferences.module'; 
import {UserModule} from './user/user.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    NavComponent, 
    NavdropdownDirective, 
    PageNotFoundComponent 
    ], 
    imports: [ 
    HttpModule, 
    BrowserModule, 
    UserModule, 
    RegistrationModule, 
    ScheduleModule, 
    PreferencesModule, 
    AppRoutingModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

ich jemand hoffen kann mir helfen, was ich falsch mache.

Hilf mir, Obi-one Kenobi, du bist meine einzige Hoffnung - Prinzessin Lea, eine neue Hoffnung

+0

Verwendet "AppRoutingModule" Lazy Loaded Routen? – pixelbits

+0

Nein, ich habe keine lazy loaded Routen in meiner App –

Antwort

0

Wenn Sie einen beobachtbaren wie in diesem Code zurück:

isLoggedIn(): Observable<boolean> { 
    return this._isLoggedIn.asObservable(); 
    } 

Die Anrufcode muss abonniert werden.

Für das, was Sie tun, ist die Verwendung eines BehaviorSubject ein wenig übertrieben. Da isLoggedIn an die Benutzeroberfläche gebunden ist, werden Änderungsbenachrichtigungen automatisch verarbeitet. Alles, was ist, dass Sie wirklich eine einfache Boolesche Eigenschaft:

Auth-Service

this.isLoggedIn: boolean = false; 

Component Nav

export class NavComponent implements OnInit { 

    constructor(private auth: AuthenticationService) { 

    } 

    ngOnInit() { 
    } 

    get isLoggedIn() { 
    return this.auth.isLoggedIn; 
    } 

} 

Jedes Mal, wenn die isLoggedIn im Betriebszustand ändert, wird die Änderungserkennung nehmen Sie die Änderung auf und die Benutzeroberfläche wird entsprechend angepasst.

+0

Danke für die Antwort. Leider hat keine dieser Lösungen für mich den Zweck erfüllt. Ich habe tatsächlich vergessen, das Observable zu abonnieren. Total vermisst. Trotzdem muss ich meine Seite manuell aktualisieren, um die Änderung der Variablen zu sehen.Ich bin wirklich verwirrt. Könnte es sein, dass es etwas mit meinen Modulimporten zu tun hat? –

Verwandte Themen