Я ссылался на приведенную ниже ссылку для включения кнопки выхода только после входа в систему
https://stackblitz.com/edit/angular-login-hide-navbar-ngif
Я хочу отображать «выход из системы» в панели навигации только тогда, когда пользователь вошел в систему, для которого я проверяю, вошел ли пользователь в систему, вызвав «this.authservice.isUserLoggedIn» из «Служба аутентификации» и назначив его переменной и написание условия ngif рядом со ссылкой "logout". Я использовал BehaviourSubject для получения текущего состояния. Но я не знаю, почему код не работает, и он всегда возвращает false, и, следовательно, ссылка «выход из системы» не активна даже после входа пользователя в систему
У меня есть header.component.ts
export class CommonheaderComponent implements OnInit {
constructor(private authservice : AuthenticationService) { }
isLoggedIn$ : Observable<boolean>;
ngOnInit() {
this.isLoggedIn$ = this.authservice.isUserLoggedIn;
}
}
У меня есть header.component.html, как показано ниже
<ul class="nav navbar-nav">
<li><a [routerLink]='["/search"]'>Search <span class="slider"></span></a></li>
<li *ngIf="isLoggedIn"><a (click)="logout()">Logout</a></li>
</ul>
Ниже находится login.component.ts
export class LoginComponent implements OnInit {
isLoggedIn : Observable<boolean>;
ngOnInit() {
this.isLoggedIn = this.authservice.isUserLoggedIn;
this.loginForm = this.formbuilder.group({
username : ['', Validators.required],
password : ['', Validators.required]
})
}
}
onSubmit(){
this.authservice.login(this.loginForm.value).subscribe(data => {
})
}
}
У меня есть служба аутентификации, как показано ниже
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../_models/user';
import { Router } from '@angular/router';
const httpOptions = {
headers : new HttpHeaders({'Content-type' : 'application/json'})
}
@Injectable({
providedIn: 'root'
})
export class AuthenticationService {
private currentUserSubject : BehaviorSubject<User>;
private currentUser : Observable<User>;
private loggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
constructor(private http: HttpClient, private router: Router) {
this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
this.currentUser = this.currentUserSubject.asObservable();
}
public get currentUserValue(): User{
return this.currentUserSubject.value;
}
public login(user: User):Observable<any>{
var baseUrl = "http://localhost:3000/";
return this.http.post<any>(baseUrl+'auth/login', user, httpOptions).pipe(map(user => {
if(user && user.accesstoken){
localStorage.setItem('currentUser', JSON.stringify(user));
this.currentUserSubject.next(user);
this.loggedIn.next(true);
}else{
return false;
}
return user;
}))
}
get isUserLoggedIn(){
return this.loggedIn.asObservable();
}
}
Где я совершил ошибку. Или каково решение / альтернатива для этого. Пожалуйста, помогите !!
Я застрял с этим долгое время