如何在angular中登录后获取用户详细信息

Question

大家好，我是angular新手

我从一个网站复制粘贴了一个登录页面。

没有对代码的解释。

登录成功，但现在我想在帐户页面显示用户详细信息，不知道该怎么做。

我搜索了相同的网站，它说要从localStorage或令牌做到这一点，但不知道如何做到这一点，没有网站是非常清楚的。

这是loginapi.service.ts

import { Injectable, Output, EventEmitter } from '@angular/core';
import { map } from 'rxjs/operators';
import { HttpClient,HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class LoginApiService {
headers: HttpHeaders;
redirectUrl: string;
baseUrl:string = "http://localhost/BdayBash.github.io-main/database";
@Output() getLoggedInName: EventEmitter<any> = new EventEmitter();
constructor(private httpClient : HttpClient) { }
public userlogin(username, password) {
alert(username)
return this.httpClient.post<any>(this.baseUrl + '/login.php', { username, password })
.pipe(map(Users => {
this.setToken(Users[0].name);
this.getLoggedInName.emit(true);
return Users;
}));
}
setToken(token: string) {
localStorage.setItem('token', token);
}
getToken() {
return localStorage.getItem('token');
}
deleteToken() {
localStorage.removeItem('token');
}
isLoggedIn() {
const usertoken = this.getToken();
console.log(usertoken);
if (usertoken != null) {
return true
}
return false;
}
}

谢谢!

Answer 1

如果你想从这个服务中获取连接的用户，你可以像这样添加一个BehaviorSubject和一个Observable:

private userSubject = new BehaviorSubject<Authenticate | null>(null);
user$ : Observable<Authenticate | null> = this.userSubject.asObservable();

当您从HTTP调用中获得用户时，将数据推送到Subject:

return this.httpClient.post<any>(this.baseUrl + '/login.php', { username, password })
.pipe(map(Users => {
this.setToken(Users[0].name);
this.userSubject.next(Users[0]); // << this
this.getLoggedInName.emit(true);
return Users;
}));
}

然后在你的应用中的任何地方，你都可以调用service.users$Observable来获取登录的用户。