如何从登录组件到angular中的另一个组件获取sessionStorage的值

Question

I want to store user id in sessionStorage and get in blogcomponent how to get please help me..

loginComponente.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { NgFlashMessageService } from 'ng-flash-messages';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AuthenticationServiceService } from '../_services';
import { AlertService } from '../_services';
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  msg: string = null;
  loading = false;
  submitted = false;
  returnUrl: string;
  constructor(
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    public router: Router,
    public flashMessageService: FlashMessagesService,
    private authenticationService: AuthenticationServiceService,
    private alertService: AlertService) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
    });

    if (!this.authenticationService.setLoginStatus) {
      this.router.navigate(['login']);
    }


    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['/'] || '/';
  }
  get f() { return this.loginForm.controls; }

  onSubmit() {
    // if form valid then call authentication API 
    if (this.loginForm.valid) {
      this.submitted = true;
      // this.loading = true;
      this.authenticationService.login(this.f.email.value,
        this.f.password.value)
        .pipe(first())
        .subscribe(
          data => {
            if (data.status === false) {
              alert("Please enter valid Email Or Password");
              this.router.navigate(['login']);

              this.authenticationService.setLoginStatus(0);

            }
            else {

              this.flashMessageService.show('You have successfully logged in',
                { cssClass: 'alert-success', timeout: 3000 });
              this.router.navigate(['blog-list']);
              sessionStorage.setItem('currentUser',data.id);
              var users = sessionStorage.getItem('currentUser');
              // console.log("You have successfully logged in");
              console.log(users);
            }
          },
          error => {
            this.alertService.error(error);
            this.loading = false;
          });
    }
  }

}

I want to get login user id in blog-list componenet in ngoninit function is getUserBlogById() but its gives error how to get id in getUserBlogid() please help me.

blog-list.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { Subscription } from 'rxjs';
import { UserService } from '../_services';
import { User } from '../_models'
import { FlashMessagesService } from 'angular2-flash-messages';
import { AuthenticationServiceService } from '../_services';
@Component({
  selector: 'app-blog-list',
  templateUrl: './blog-list.component.html',
  styleUrls: ['./blog-list.component.css']
})
export class BlogListComponent implements OnInit, OnDestroy {
  currentUser: User;
  msg: string = null;
  id: number;
  currentUserSubscription: Subscription;
  users: User[] = [];

  constructor(

    public router: Router,
    public flashMessageService: FlashMessagesService,
    private authenticationService: AuthenticationServiceService,
    private userService: UserService
  ) {
    this.currentUserSubscription = this.authenticationService.currentUser.subscribe(user => {
      this.currentUser = user;


    });
  }

  ngOnInit() {

    this.getUserBlogById(1);
  }
  ngOnDestroy() {

    // unsubscribe to ensure no memory leaks
    this.currentUserSubscription.unsubscribe();

  }

  deleteUser(id: number) {
    this.userService.delete(id).pipe(first()).subscribe(() => {
      //this.getUserBlogById(this.id);
      this.flashMessageService.show('Blog deleted successfully.',
      { cssClass: 'alert alert-danger alert-dismissible fade in', timeout: 3000 });
    });
}

  private getUserBlogById(id:number) {

    this.userService.getAll(id).pipe(first()).subscribe(users => {
      this.users = users;
    });
  }


}

how to use sessionStorage value in blog-list.component , i want to show blog of user logged in please help me how to resolve this type of problem . Thank you in advance...

Answer 1

You can access the session storage item in ngOnInit() lifecycle hook that was set in loginComponente.ts

blog-list.component.ts

ngOnInit() {
  //here you can access your sessionstorage item like
   let currentUserId= sessionStorage.getItem('currentUser');
    this.getUserBlogById(currentUserId);
  }

Answer 2

The first thing is in your Login Component You need to add item in session storage before you Redirect Further ;

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { NgFlashMessageService } from 'ng-flash-messages';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AuthenticationServiceService } from '../_services';
import { AlertService } from '../_services';
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  msg: string = null;
  loading = false;
  submitted = false;
  returnUrl: string;
  constructor(
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    public router: Router,
    public flashMessageService: FlashMessagesService,
    private authenticationService: AuthenticationServiceService,
    private alertService: AlertService) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
    });

    if (!this.authenticationService.setLoginStatus) {
      this.router.navigate(['login']);
    }


    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['/'] || '/';
  }
  get f() { return this.loginForm.controls; }

  onSubmit() {
    // if form valid then call authentication API 
    if (this.loginForm.valid) {
      this.submitted = true;
      // this.loading = true;
      this.authenticationService.login(this.f.email.value,
        this.f.password.value)
        .pipe(first())
        .subscribe(
          data => {
            if (data.status === false) {
              alert("Please enter valid Email Or Password");
              this.router.navigate(['login']);

              this.authenticationService.setLoginStatus(0);

            }
            else {

              this.flashMessageService.show('You have successfully logged in',
                { cssClass: 'alert-success', timeout: 3000 });
               sessionStorage.setItem('currentUser',data.id);
               var users = sessionStorage.getItem('currentUser');
               // console.log("You have successfully logged in");
               console.log(users);
              this.router.navigate(['blog-list']);
            }
          },
          error => {
            this.alertService.error(error);
            this.loading = false;
          });
    }
  }

}

On you Other component's Onint life cycle hook as:

ngOnInit() {
//'+' operator will convert string into number
    var userId = +sessionStorage.getItem('currentUser');
    this.getUserBlogById(userId);
  }