Как получить идентификатор авторизованного пользователя в angular (MONGODB, NODEJS для бэкэнда) - PullRequest
0 голосов
/ 10 июля 2020

Я хотел бы получить идентификатор зарегистрированного пользователя, чтобы когда пользователь вошел в систему и щелкнул «Мой профиль», они перенаправлялись на url / profile / «theirId». Заранее спасибо! Вот мой authentication.service

export interface UserDetails{
  username: string
  email: string
  password: string
  firstName: string
  lastName: string
  exp: number
  iat: number
}
interface TokenResponse{
  token: string
}
export interface TokenPayload{
  username: string
  email: string
  password: string
  firstName: string
  lastName: string
}
@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  private token: string

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

  private saveToken(token: string): void{
    localStorage.setItem('usertoken', token)
    this.token = token
  }
  private getToken(): string{
    if(!this.token){
      this.token = localStorage.getItem('usertoken')
    }
    return this.token
  }
  public getUserDetails(): UserDetails{
    const token = this.getToken()
    let payload
    if(token){
      payload = token.split('.')[1]
      payload = window.atob(payload)
      return JSON.parse(payload)
    }else{
      return null
    }
  }
  public isLoggedIn(): boolean{
    const user = this.getUserDetails()
    if(user){
      return user.exp > Date.now()/ 1000
    }
    else{
      return false
    }
  }
  public login(user: TokenPayload): Observable<any>{
    const base = this.http.post('/user/login', user)
    const request = base.pipe(
      map((data: TokenResponse) => {
        if(data.token){
          this.saveToken(data.token)
        }return data
      })
    )
    return request
  }
  public register(user: TokenPayload) : Observable<any>{
    const base = this.http.post('/user/register', user)
    const request = base.pipe(
      map((data: TokenResponse) => {
        if(data.token){
          this.saveToken(data.token)
        }
        return data
      })
    )
    return request
  }
  public profile(id): Observable<any>{
    return this.http.get(`/user/profile/${id}`,
    {
      headers: {Authorization: `${this.getToken()}`}
    })
  }
  public logout(): void{
    this.token = ''
    window.localStorage.removeItem('usertoken')
    this.router.navigateByUrl('/')
  }

}

Вот мой header.component.ts (поскольку «Мой профиль» находится внутри этого компонента). Я не уверен, что добавить в метод myProfile, чтобы получить идентификатор зарегистрированного пользователя

export class HeaderComponent implements OnInit {
  details: UserDetails


  constructor(public auth: AuthenticationService,
    private route: ActivatedRoute) { }

  ngOnInit() {
  }
  navSlide(){
    const nav = document.querySelector('.navbar-menu');
    nav.classList.toggle('navbar-active')
  } 
  myProfile(){
    **//NOT SURE WHAT TO PUT HERE**
  }
}

1 Ответ

1 голос
/ 10 июля 2020

Установить publi c переменную идентификатора пользователя в xxx.service.ts (вводимая служба) при нажатии «Мой профиль», импортировать xxx.service.ts в header.component.ts, функция myProfile может получить переменную идентификатора пользователя

Как получить переменную publi c в разных компонентах:

userService.ts

import { Injectable } from '@angular/core';

@Injectable()

export class UserService{
    userId:string;
}

MyProfileComponent

import { UserService } from 'xx/xx/userService.ts';

constructor(            
    public userService: UserService,           
) {}

clickMyProfile(id){
    // do something else
    this.userService.userId=id;
}

HeaderComponent

import { UserService } from 'xx/xx/userService.ts';

constructor(            
    public userService: UserService,           
) {}

myProfile(){
    const id = this.userService.userId;
}
...