Angular登录成功后如何获取用户详情并在账户页展示

你当前代码登录成功后仅将用户名存入localStorage的token字段，没有存储完整用户信息，也没有提供读取已登录用户详情的方法，所以账户页无法直接获取要展示的内容，按以下步骤修改即可：

1. 改造登录服务，支持存储/读取完整用户信息 #

修改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记得功能验证完删除
  // alert(username)
  return this.httpClient.post<any>(this.baseUrl + '/login.php', { username, password })
  .pipe(map(Users => {
    if (Users?.length > 0) {
      // 存储完整用户信息，不再只存用户名
      this.setUserInfo(Users[0]);
      this.getLoggedInName.emit(true);
    }
    return Users;
  }));
}

// 存储完整登录用户信息
setUserInfo(user: any) {
  localStorage.setItem('currentUser', JSON.stringify(user));
  // 兼容原有逻辑，保留token字段存储
  localStorage.setItem('token', user.name);
}

// 新增方法：获取当前登录用户的完整详情
getCurrentUser() {
  const userCache = localStorage.getItem('currentUser');
  return userCache ? JSON.parse(userCache) : null;
}

getToken() {
return localStorage.getItem('token');
}

deleteToken() {
localStorage.removeItem('token');
// 退出时同步清除用户详情缓存
localStorage.removeItem('currentUser');
}

isLoggedIn() {
const usertoken = this.getToken();
console.log(usertoken);
return usertoken != null;
}
}

2. 账户页读取并展示用户信息 #

在你的账户页组件中，通过服务提供的方法直接读取缓存的用户信息即可。
首先在组件ts文件（例：account.component.ts）中初始化时获取数据：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoginApiService } from '替换成你项目内登录服务的实际相对路径/loginapi.service';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html'
})
export class AccountComponent implements OnInit {
  userInfo: any = null;
  constructor(
    private loginService: LoginApiService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.userInfo = this.loginService.getCurrentUser();
    // 未登录兜底跳转
    if (!this.userInfo) {
      this.router.navigate(['/login']);
    }
  }
}

然后在组件模板文件（account.component.html）中绑定字段展示：

<div class="account-page" *ngIf="userInfo">
  <h2>我的账户</h2>
  <ul class="user-detail-list">
    <li>用户名：{{ userInfo.name }}</li>
    <!-- 后端返回的其他用户字段直接对应属性名绑定即可，比如邮箱、注册时间等 -->
    <!-- <li>注册邮箱：{{ userInfo.email }}</li> -->
  </ul>
</div>

注意事项 #

• 你当前代码中存储的token本质是用户名，不是标准接口鉴权凭证，如果后续需要做接口权限校验，建议让后端返回正规的鉴权令牌（如JWT）替换现有存储逻辑
• localStorage不要存储用户密码等敏感信息，后端login接口返回用户数据时记得过滤掉密码等敏感字段
• 如果需要跨页面实时同步用户登录状态变化，可以订阅服务中已有的getLoggedInName事件，在事件触发时重新调用getCurrentUser()更新页面数据即可

内容的提问来源于stack exchange，提问作者Harsh Sharma