How to get current user id angular 4?

Question

I have to get current user ID to use it in different parts in my app..

login.component.ts:

onSignin(form: NgForm){
const UserName = form.value.UserName;
const Password = form.value.Password;
this.authService.signinUser(UserName,Password).map(res => res.json())
 .subscribe(
   data => {
     if (data.Id == 0){
     this.invalid=true;
    }
    else{
      localStorage.setItem('isLoggedin', 'true');
      this.router.navigate(['/calendar']);
      console.log('Ok');
   }})}

auth.service.ts:

signinUser(UserName,Password): Observable<any>{
  return this.http.get('http://api.##.com/api/security/signin?username='+UserName+'&password='+Password);
}

Rahul Singh · Answer 1 · 2017-10-03T17:39:38.317

You want to use the userID you get from the Service call to different components in you app. I hope this is what you are looking for.

There are three ways you can do this .

Shared Services - Make use of a shared service add the userID to a user id subject in the service and set this up at the time of login in . The next time when the user Id is changed the observing component will be notified.
NGRX - A much cleaner implementation of shared service , i would suggest you to use this if your app is huge.
Local storage - this is very debatable as it depends on users discretion too . Set and get User id between components.

Do note that if the user hard refreshes the page any time in NGRX or Shared services the data will be lost you might need to use local storage for full proofing.

Can you please look into this: https://stackoverflow.com/questions/63539252/how-to-fetch-data-from-localstorage-of-a-browser-synchronously-in-angular/63539278?noredirect=1#comment112356502_63539278 — Tanzeel, Aug 27 '20 at 04:46

Abhishek Singh · Accepted Answer · 2017-10-03T13:54:05.163

4

You can pass the token from the backend which will contain the id or you can use redux store which will store the id on the front end for your application to use. Below is the link for ng2 Redux package in angular. https://www.npmjs.com/package/ng2-redux There is also an option to save it into local storage but I will not prefer it.Or You can use session storage to save the data on the front end like this

saving in the session in your login Component file use this code

sessionStorage.setItem('id', data.id);
retrieving from the session//
var data = sessionStorage.getItem('id');
console.log(data) to see the id in the console

edited Oct 03 '17 at 13:54

answered Oct 03 '17 at 13:15

Abhishek Singh

900
7
19

could you give me more explanation about passing the token form the backend ? i don't know how to use ng2 Redux to get User_ID – Aya Abdelaziz Oct 03 '17 at 13:20
You can use jwt library to form a token in the backend that you will pass to the front end and in the local storage you will save the token. – Abhishek Singh Oct 03 '17 at 13:23
What are you using in the backend – Abhishek Singh Oct 03 '17 at 13:23
http://www.developerhandbook.com/c-sharp/create-restful-api-authentication-using-web-api-jwt/ here is refrence of how to use jwt in asp.net – Abhishek Singh Oct 03 '17 at 13:30
By the way if you are making this application for learning purposes you can store the user id in the local storage – Abhishek Singh Oct 03 '17 at 13:31
no it's a real app .. what should i do on front end?? – Aya Abdelaziz Oct 03 '17 at 13:32
Here you can use session storage to save the data on the frontend sessionStorage.setItem('key', 'value'); // Get saved data from sessionStorage var data = sessionStorage.getItem('key'); – Abhishek Singh Oct 03 '17 at 13:35
i don't know the session storage . any link helps me please ? – Aya Abdelaziz Oct 03 '17 at 13:36
let me know if it helped – Abhishek Singh Oct 03 '17 at 13:39
i'm sorry , i'm confused . should i create session.storage.ts ? – Aya Abdelaziz Oct 03 '17 at 13:43
No you don't have to create a new ts file – Abhishek Singh Oct 03 '17 at 13:47
add this code in your login.component.ts sessionStorage.setItem('key', data.Id); to retrieve it in another componet use var data = sessionStorage.getItem('key'); – Abhishek Singh Oct 03 '17 at 13:48
what is key and value :/ what are they refering to ? – Aya Abdelaziz Oct 03 '17 at 13:49
key is the property name which will save your data.id – Abhishek Singh Oct 03 '17 at 13:52

How to get current user id angular 4?

2 Answers2