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
Verwendet "AppRoutingModule" Lazy Loaded Routen? – pixelbits
Nein, ich habe keine lazy loaded Routen in meiner App –