Angular9中的当前用户信息

Question

如何在Angular 9中获取当前登录用户信息？

我是一个新的web开发新手，正在处理Angular 9中的一个项目。我通过提供用户名和密码成功登录。现在我想获取当前用户id，但在此任务中，我是failed.Please，任何人都可以指导我如何从数据库中获取当前用户id或当前用户配置文件，并将此信息存储在本地存储中。我的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

在后台验证使用用户名和密码返回数据或根据结果返回错误，这将有助于登录

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

Answer 2

这取决于您对POST API调用的响应。

如果您的post API在验证成功后返回用户信息和access_token。然后在你的组件中，你可以像下面这样订阅它(你已经在这样做了)

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

如果您的接口在使用returnURL追加access_token (http://localhost:4200?returnUrl=someUrl&access_token=jwt)验证成功后重定向回UI，您可以尝试以下代码。

服务代码

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
    }
  }

}