How to retrieve user ID using Angular?

Question

How to retrieve user ID using Angular?

I need to extract the userId of the current signed-in user and pass it as a parameter (foreign Key) to another method called AddExperience. The userId is stored in LocalStorage after logging in!

Here is the action from the service:

AddExperience(UserId: any) { return this.http.post(this.rootUrl + '/AddExperience'+ UserId, {responseType: 'json'}); }

These are the values stored in localStorage:

token-exper: 2122-07-23T01:40:15Z
UserRole: User
ID: 2aa0f755-cf7d-4c62-bfe8-1de35ee01b09

What steps should I take in the AddExperience TypeScript file to associate the Experience with the current User?

angular typescript angular-ui-router token storage

Answer 1

Answer №1

To access information stored in the localStorage using Angular, start by importing the necessary module

import { StorageMap } from '@ngx-pwa/local-storage';

In the constructor, declare a protected variable that Angular will convert into a local variable

constructor(protected storage: StorageMap) { }

You can then utilize the methods within this local storage variable as shown below

public get<D, M>(key: string) {
    return this.storage.get(key).pipe(
      map((item?: any) => {
        if (item) {
          return new StorageItem(item?.data, item?.meta, item?.meta?._creationTimestamp);
        } else {
          return new StorageItemError(`Data of ${key} was not found in Storage`);
        }
      })
    );
  }

Finally, you can implement it in your specific scenario like this

    public userIdObtainedFromLocalStorage: string = '';

    this.get('ID').subscribe((userId: string) => {
    this.userIdObtainedFromLocalStorage = userId;

})

Answer 2

To access information stored in the localStorage using Angular, start by importing the necessary module

import { StorageMap } from '@ngx-pwa/local-storage';

In the constructor, declare a protected variable that Angular will convert into a local variable

constructor(protected storage: StorageMap) { }

You can then utilize the methods within this local storage variable as shown below

public get<D, M>(key: string) {
    return this.storage.get(key).pipe(
      map((item?: any) => {
        if (item) {
          return new StorageItem(item?.data, item?.meta, item?.meta?._creationTimestamp);
        } else {
          return new StorageItemError(`Data of ${key} was not found in Storage`);
        }
      })
    );
  }

Finally, you can implement it in your specific scenario like this

    public userIdObtainedFromLocalStorage: string = '';

    this.get('ID').subscribe((userId: string) => {
    this.userIdObtainedFromLocalStorage = userId;

})

How to retrieve user ID using Angular?

Answer №1

Similar questions

What is the process for accessing and updating values within nested form fields in angular2?

"Exploring the dynamic capabilities of Angular 15 with Ngrx store

Using the oidc-client library in Angular to create a customized isLoggedIn() function within *ngIf implementation

I am experiencing difficulty in retrieving the content-disposition from the client

Error: The function gtag within the window object is not recognized

TS7016: No declaration file was found for the module named 'rxjs'

How do EventEmitter<undefined> and EventEmitter<void> differ from each other?

Issue with Service Fabric - Unable to run Angular project on local Windows machine: EPERM error preventing operation

Transmitting information from a modal component to its parent component in Angular using MDB

How can you obtain the key that comes after or before an existing key in a sorted TypeScript string enum?

Reorganizing Execution Order in AfterViewInit with Subscriptions in Angular 10

Guidelines for releasing Node.js microservice client as a stand-alone package within the repository

Steps for configuring Types in Graphql Codegen

"Connecting multiple URLs to the same router link: A step-by-step guide

What is the mechanism behind lazy module loading in typescript?

Utilizing the Cerialize Library in Angular 2 to bind the properties of an object item to a class

How to identify the type of a union type in Typescript

Utilizing Angular 2's Routerlink with *ngIf and Parameters

Exploring Angular: how RxJS enhances the power of making http requests

Angular: define an object with multiple nested levels using variables for keys and values