Текущая информация о пользователе в Angular9

Question

Как я могу получить текущую информацию о пользователе для входа в систему в Angular 9 ????????????
Я новичок в веб-разработке и работаю над проектом в Angular 9. Я успешно вошли, указав имя пользователя и пароль. Теперь я хочу получить текущий идентификатор пользователя, но в этой задаче я потерпел неудачу. Пожалуйста, любой может помочь мне получить текущий идентификатор пользователя или текущий профиль пользователя из базы данных и сохранить эту информацию в локальном хранилище. Код моего login.component.ts здесь

import { AppConstants } from './../../private/AppConstants';
import { BadInput } from './../../../common/ErrorHandler/badInput';
import { AuthService } from '../../private/Services/auth.service';
import { Router, ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';

import { AppError } from '../../../common/ErrorHandler/appError';
import { toBase64String } from '@angular/compiler/src/output/source_map';
import { stringify } from 'querystring';


@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  invalidLogin: boolean = false;
  userName: string;
  constructor(
    private route: Router,
    private router: ActivatedRoute,
    private authService: AuthService) {

  }

  errorFlag: boolean;
  errorMessage: string;

  ngOnInit() { }

  signIn(credentials) {
    this.errorFlag = false;
    this.authService.blockUI.start();
    this.authService.login(credentials)
      .subscribe(
      resp => {
          let returnUrl = this.router.snapshot.queryParamMap.get('returnURL');
          if (resp !== undefined && resp["access_token"]) {
            localStorage.setItem(AppConstants.userInfo , resp["access_token"] );
            localStorage.setItem("message","Welcome Sajid");
            localStorage.setItem("userid",resp["access_id"]);
            this.route.navigate([returnUrl || '/']);
          }
          else this.invalidLogin = true;
          this.authService.blockUI.stop();
        },
        (error) => {
          this.authService.blockUI.stop();
          if (error instanceof BadInput) {
            //alert(error.message);
            this.errorMessage = error.message;
          }
          //else throw error;
          else if (error.status === 400) {
            //alert(error.json().error_description);
            this.errorMessage = error.json().error_description;
          }
          this.errorFlag = true;
        }
      );
  }
}



My service code is given below
import { HttpClient } from '@angular/common/http';
import { AppConstants } from './../AppConstants';
import { NotFoundError } from '../../../common/ErrorHandler/notFoundError';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
//import { Http, Headers, RequestOptions } from '@angular/http';
import { AppError } from '../../../common/ErrorHandler/appError';
import {environment} from '../../../environments/environment'
import { BadInput } from '../../../common/ErrorHandler/badInput';
import { NgBlockUI, BlockUI } from 'ng-block-ui';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {

  constructor(private http : HttpClient){
     this.headers = new Headers();
    this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
   this.options = {headers  : this.headers};
   }
  private headers;
  private options; 
  @BlockUI() blockUI: NgBlockUI;

  login(credentials)
  {

     return this.http.post( environment.authURL +  "token", 
     "grant_type=password&username="+ credentials.userName + "&password=" + credentials.password +
      "&client_id="+ environment.clientId ,this.options);
  }

  logout()
  {
    localStorage.clear();
  }

isLogedIn()
{
  let userInfo = localStorage.getItem(AppConstants.userInfo);
  if(userInfo !== undefined && userInfo !== null) 
  {
   //let expiryDate : Date = new Date(userInfo[".expires"]);
   //if (expiryDate > new Date()) return true;
   // Implement Refresh token Logic here as well ...........
   return true;
  }

  return false;
}

currentUser()
{
  let userInfo = localStorage.getItem(AppConstants.userInfo);
  return userInfo;
}

private ErrorHandler(error : Response)
{
  if(error.status === 404)
  {
    //return Observable.throw(new NotFoundError());
  }
  if(error.status === 400)
  {
    ///return Observable.throw(new BadInput(error.json().error_description));
  }
  //return Observable.throw(new AppError(error));
}

}

Answer 1

Это зависит от вашего ответа на вызов POST API.

Если ваш post API возвращает информацию о пользователе и access_token после успешной проверки. тогда в своем компоненте вы можете просто подписаться на него, как показано ниже (что вы уже делаете)

 this.authService.login(credentials).subscribe((response: any) => {
  // save user info
})

Если ваш API перенаправляет обратно в пользовательский интерфейс после успешной проверки с returnURL, добавляющим access_token (http://localhost : 4200? ReturnUrl = someUrl & access_token = jwt ), вы можете попробовать следующий код.

Сервисный код

import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
import { Subject } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';

export class AuthService {
  helper = new JwtHelperService();

  constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParamMap.subscribe(route => {
      if (route.has('returnUrl') && route.has('access_token')) {
        this.login(route.get('access_token'));
        this.router.navigate(['returnUrl'])
      }
    });
  }

  login(token: string): boolean {
    const tokenExpired = this.helper.isTokenExpired(token);
    if (token && !tokenExpired) {
       const userInfoFromToken = this.helper.decodeToken(token);
      // save user info to localstorage
    } else {
     // logic to logout
    }
  }

}

Answer 2

Подтвердить в бэкэнде, используя имя пользователя и пароль, вернуть данные или ошибку в зависимости от результата, и это поможет для входа в систему

.subscribe(
      data => {
          // Add successfull usl Headers;          
      },
      error =>{
        //rediredt to login page
      }
);