Question

我正在使用Angular 7和Laravel 5.8创建用户Login。 Laravel是Angular的终点。我成功创建了用户登录名，但是我不知道如何显示登录的用户名

user.ts

export class User {
id?: number;
name?: string;
email?: string;
password?: string;
username?: string;

constructor() {}

}

auth.service

  onLogin(user: User): Observable<User> {

const request = JSON.stringify(
  { email: user.email, password: user.password }
);

return this.http.post(this.loginUrl, request, httpOptions)
  .pipe(
    map((response: User) => {
      // Receive jwt token in the response
      const token: string = response['access_token'];
      // If we have a token, proceed
      if (token) {
        this.setToken(token);
        this.getUser().subscribe();
      }
      return response;
    }),
    catchError(error => this.handleError(error))
  );
 }

login.component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SnotifyService } from 'ng-snotify';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
import { NotificationService } from '../../services/notification.service';

onSubmit(loginForm): void {
this.spinnerService.show();
this.authService.onLogin(this.user).subscribe(
  (response) => {     

    this.notify.success('Done, you have successfully logged in.', {timeout:2000, position: "rightTop"})        
    this.router.navigate([this.returnUrl]);      
  },
  (error) => {
    this.spinnerService.hide();
    this.error = error.error;
  }
);
// Clear form fields
loginForm.reset();
}

dashboard.component

import { Component, OnInit } from '@angular/core';
import {dashboard2} from "src/assets/dist/js/pages/dashboard2.js";
import { AuthService } from '../../services/auth.service';
import { User } from '../../models/user';

declare var $;

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

 constructor(private authService: AuthService) { }

ngOnInit() {

window.dispatchEvent(new Event('load'));
window.dispatchEvent(new Event('resize'));

$(dashboard2);
document.body.className = 'skin-blue sidebar-mini';
}
ngOnDestroy(): void {
document.body.className = '';
}

}

在仪表板组件之后，便有了仪表板html

dashboard.html

      <div class="jumbotron">
          <div class="text-center">
            <h1 class="display-3">Dashboard</h1>
            <!-- <p class="lead">This is the sample dashboard, you can find all books in book tab.</p> -->
          </div>
          <hr class="my-4">
          <div class="card">
            <h3 class="card-header text-center">Your Information</h3>
            <ul class="list-group list-group-flush">

            </ul>
          </div>
        </div>

因此，如何使用户详细信息（如用户登录电子邮件）显示在仪表板上。

Answer 1

您需要将用户详细信息存储在某处。例如服务或商店。这通常是在登录期间完成的，并且仪表板组件将检索用户详细信息。

服务您可以使用至少两种方法创建服务：setUserDetail和getUserDetail
存储/状态管理有ngrx，a4-reducer，NGXS，秋田等。

Angular-登录后在仪表板上显示用户详细信息

1 个答案: