распечатать имя пользователя после успешного входа в приложение angular8 - PullRequest
Новая
       60

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

1 голос
/ 23 апреля 2020

Я хочу отобразить свое имя пользователя после успешного входа в систему. Поскольку я работаю с токеном для входа в систему и мои логины для входа в систему c написаны отдельно, а не в моем файле аутентификации, поэтому я буду включать все необходимые файлы, для лучшего понимания

ниже приведены данные для входа файл компонента 

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})



export class LoginComponent implements OnInit {

  mode: ProgressBarMode = 'indeterminate';
  value = 50;
  bufferValue = 75;
  loading:boolean=false;


  matcher = new MyErrorStateMatcher();


  loginForm = new FormGroup({
    email: new FormControl('', [Validators.email, Validators.required ]),
    password: new FormControl('', [Validators.required, Validators.min(3) ])
  })
  get email() { return this.loginForm.get('email'); }
  get password() { return this.loginForm.get('password'); }

  errorMail = '';

  getErrorMessage(emailInput:HTMLInputElement) {
    const mail=/^\w+([\.-]?\w+)*@meltwater\.com/;
     if(!emailInput.value.match(mail)){
      this.errorMail='Email or password are not valid'
    }
    else{
      this.loading=true;
    }
  }



  constructor(
    private loginService: LoginService,
    private saveUserData:AuthService,
     private router: Router,
     private cookie:CookieService) { }

     userDisplayName = ''
  ngOnInit(): void {

  }
  rememberMe(e){
    if(e.target.checked){
      this.cookie.set('value',this.loginForm.value);
    }
  }

  onSubmit(event) {
    event.preventDefault()
    console.log('value',this.loginForm.value)

    if(this.errorMail.length === 0) {
      this.loginService.login(this.loginForm.value).subscribe((res:any) => {
        console.log('login response', res)
        if(res.auth.success === true) {
          localStorage.setItem('auth', JSON.stringify(res.auth))
          this.loginService.loggedIn$.next(res.auth)
          this.saveUserData.saveAuthData(res)
          sessionStorage.setItem('loggedUser', res.Username);
          this.router.navigateByUrl('/search/list')
        } else {
        this.errorMail='Email or password is not valid'
        }
      })
    }
  }
  // returnUserName(){
  //   return this.userDisplayName = sessionStorage.getItem('loggedUser');

  // }

}

ниже приведен файл службы входа в систему 

export class LoginService {

  constructor(private http: HttpClient) { }
  loggedIn$ = new BehaviorSubject(null)


  login(creds) {
    console.log('creds',creds)
   return this.http.post<LoginResponse>('https://backend.url/login', {creds})
  }
}

это мой файл службы аутентификации, вероятно, он не нужен, я полагаю 

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Router } from "@angular/router";
import { Subject } from "rxjs";
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: "root" })
export class AuthService {
  private isAuthenticated = false;
  private token: string;
  private email: string;
  private authStatusListener = new Subject<boolean>();

  constructor(private http: HttpClient, private router: Router) {}

  getToken() {
    return this.token;
  }

  getIsAuth() {
    return this.isAuthenticated;
  }

  getAuthStatusListener() {
    return this.authStatusListener.asObservable();
  }

  public saveAuthData(token: string) {
    localStorage.setItem("token", token);

  }

  private clearAuthData() {
    localStorage.removeItem("token");

  }


  logout() {

    // this.token = null;
    this.clearAuthData();
    this.router.navigate(["/"]);
  }


  autoAuthUser() {
    const authInformation = this.getAuthData();

      this.token = authInformation.token;
      this.isAuthenticated = true;

      this.authStatusListener.next(true);

  }

  private getAuthData() {
    const token = localStorage.getItem("token");
    if (!token ) {
      return;
    }
    return {
      token: token
    }
  }

 userDetails(){
  sessionStorage.setItem('loggedUser', .email);
 }

}

это где я хочу отобразить свое имя пользователя: заголовок

следующий компонент заголовка 

import { AuthService } from './../../auth/auth.service';
import { LoginComponent } from './../../login/login.component';
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';


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

  public userIsAuthenticated;
  public userName = '';


  constructor(public authService: AuthService,public router:Router, public user:LoginComponent) { }


  onLogout(){
    this.authService.logout();
    this.router.navigateByUrl('/');
  }

  ngOnInit(): void {
    this.userName = this.user.returnUserName() ;
  }




}

это выдает ошибку, вероятно, компонент входа в систему bcz был импортирован, я не так уверен, почему происходит ошибка

1 Ответ

0 голосов
/ 23 апреля 2020

Вы не можете внедрить Компонент как сервис, используйте вместо него @ViewChild(LoginComponent), но это не решит проблему.

Чтобы получить имя пользователя, попробуйте переместить этот метод в AuthService.

Надеюсь это помогает.

...