Angular 7 - 成功登录后显示用户名

用户11352561

我正在使用 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() {
  }

}

我想登录成功后显示用户名

阮贤

您可以将用户名设置为sessionStorage成功登录后并在另一个组件中使用

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

在 Home 组件 ts 文件中

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

在 HTML 文件中

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

登录后如何显示用户名

Angular 7-在Azure AD身份验证后获取登录用户名

成功登录后显示登录的用户名不更新Angular 8中的div

登录Nodejs App后很难显示用户名

使用锚标记登录后如何显示用户名

如何更改Windows 7用户名的大小写?

如何在Windows 7中更改用户名?

在eclipse中成功登录后,从servlet到jsp调用或获取用户名值

Devise + Angular + Rails 4:更改已登录用户不验证用户名/密码

尝试在用户登录后在导航栏中显示用户的用户名吗?

使用adLDAP显示登录的用户名

成功登录后,显示注销按钮以及用户名

成功登录后的Node.js Passport Display用户名

更改用户名后,新的用户名不会显示在登录窗口中

在codeigniter中成功登录后显示用户名

登录后如何打印用户名?

登录Angular后在每个网页上显示用户名

登录后无法显示用户名

通过Angular 2登录表单将用户名和密码传递给JWT令牌控制器

在 angular2 中登录后显示用户名

显示当前登录的用户名

在组件 angular7 中显示当前用户的用户名

如何在 Windows(7、8、8.1 和 10)中判断登录用户的用户名?

登录后如何重定向到我想要的页面,登录成功后如何显示用户名

登录用户初始值为空 Angular 7

如何在codeigniter中登录后显示用户名

登录后如何获取用户名?。我正在尝试使用 MSAL(@azure/msal-angular)进行 Azure 登录

使用 firebase.User 方法从 firebase angular 项目获取登录用户的用户名时出错

为什么登录成功后菜单栏中没有显示用户名而不显示登录图标?