Hello i am new to angular

And I have made a login page from copy pasting from a website.

There was no explanantion for the code there.

The Login was successful but now I wanna show user details on the account page and Don't Know how to do so.

I searched websites for the same and it said to do it from localStorage or token but don't know how to do so,No website was very clear about how exactly.

This is the loginapi.service.ts

import { Injectable, Output, EventEmitter } from '@angular/core';
import { map } from 'rxjs/operators';
import { HttpClient,HttpHeaders } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})

export class LoginApiService {

headers: HttpHeaders;
redirectUrl: string;
baseUrl:string = "http://localhost/BdayBash.github.io-main/database";
@Output() getLoggedInName: EventEmitter<any> = new EventEmitter();
constructor(private httpClient : HttpClient) { }
public userlogin(username, password) {
alert(username)

return this.httpClient.post<any>(this.baseUrl   '/login.php', { username, password })
.pipe(map(Users => {
  this.setToken(Users[0].name);
  this.getLoggedInName.emit(true);
  return Users;
}));
}

setToken(token: string) {
localStorage.setItem('token', token);

}
getToken() {
return localStorage.getItem('token');
}
deleteToken() {
localStorage.removeItem('token');
}
isLoggedIn() {
const usertoken = this.getToken();
console.log(usertoken);
if (usertoken != null) {
return true
}
return false;
}

}

Thank you!

CodePudding user response：

If you want to get the connected user from this service, you can add a BehaviorSubject and an Observable to it like this :

  private userSubject = new BehaviorSubject<Authenticate | null>(null);
  user$ : Observable<Authenticate | null> = this.userSubject.asObservable();

And when you get the user from the HTTP call, push the data in the Subject :

return this.httpClient.post<any>(this.baseUrl   '/login.php', { username, password })
.pipe(map(Users => {
  this.setToken(Users[0].name);
  this.userSubject.next(Users[0]); // << this
  this.getLoggedInName.emit(true);
  return Users;
}));
}

And then anywhere in your app, you can call the service.users$ Observable to always get the logged-in user.