Angular 7 - отображать имя пользователя после успешного входа

Question

Я использую Angular 7 и Laravel для создания логина пользователя.Laravel служит конечной точкой Angular.Я успешно создал логин пользователя, но не знаю, как отобразить логин с именем пользователя

. Я сделал это так, что после успешного входа он перенаправляет на страницу панели инструментов.Я создал сервис для входа в систему (jarwis.service).

jarwis(login) service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class JarwisService {

  private baseUrl = 'http://localhost/cloudengine-sandbox/cloudengine/public/api';
  //private baseUrl = '/api';


  constructor(private http:HttpClient) { }

  signup(data){
    return this.http.post(`${this.baseUrl}/signup`, data)
  }
  login(data){
    return this.http.post(`${this.baseUrl}/login`, data)
  }

  sendPasswordResetLink(data) {
    return this.http.post(`${this.baseUrl}/sendPasswordResetLink`,data)
  }
}

компонент входа

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subscriber } from 'rxjs';
import { JarwisService } from '../../services/jarwis.service';
import { TokenService } from '../../services/token.service';
import { Router } from '@angular/router';
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  public form = {
    email:null,
    password:null
  };

 public error = null;
  constructor(
    private Jarwis:JarwisService,
    private Token:TokenService,
    private router:Router,
    private Auth:AuthService
  ) { }

  onSubmit() {
  this.Jarwis.login(this.form).subscribe(
     data => this.handleResponse(data),
     error => this.handleError(error)
  );
  }

  handleResponse(data){
 this.Token.handle(data.access_token);
 this.Auth.changeAuthStatus(true);
 this.router.navigateByUrl('/home');
  }


  handleError(error){
 this.error = error.error.error;
  }

  ngOnInit() {
  }

}

Я хочу отобразить имя пользователя после успешного входа

Answer 1

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

handleResponse(data){
  this.Token.handle(data.access_token);
  this.Auth.changeAuthStatus(true);
  sessionStorage.setItem('loggedUser', data.Username);
  this.router.navigateByUrl('/home');
}

в домашнем компоненте ts файла

export class NavbarComponent implements OnInit {
    userDisplayName = '';
    ngOnInit() {
       this.userDisplayName = sessionStorage.getItem('loggedUser');
    }
}

в HTML-файле

<div class="username">Username: {{userDisplayName}}</div>