how to get user details after login in angular

Question

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!

You have to subscribe the api or function userlogin to get the user information. Also the local storage key value pairing is not used properly here. check userlogin function, it shows `this.setToken(Users[0].name);` while setToken only accepts token value and store the value in token key. Store user information in local storage and access it. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage. https://stackoverflow.com/questions/51536262/angular-6-saving-data-to-local-storage — Suman, Jul 11 '22 at 11:49

score 0 · Accepted Answer · answered Jul 11 '22 at 12:11

0

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.

answered Jul 11 '22 at 12:11

Alain Boudard

768
6
16

This worked but if I refresh the page the values are gone again. So is there a way to store those values untill the person logout ? – Harsh Sharma Jul 11 '22 at 13:00
Ah, that's a common issue ! First, we are not supposed to "refresh" the page, so we need to handle it with different options. If it doesn't cost you a lot, since it's your server, you still can make a call to an `adress / url` on your server that will answer with the user data, that will answer with the current server session. Because remember your JS app is stateless, but your server might still have the session of the user active ! And you call that on the App initialization. – Alain Boudard Jul 11 '22 at 13:07

how to get user details after login in angular

1 Answers1