授权成功后，如何在Angular应用的个人资料组件中展示用户信息？

1. 生成个人资料组件 #

用Angular CLI快速创建组件：

ng generate component profile

2. 创建用户状态管理服务 #

通过服务统一存储、共享登录后的用户信息，避免组件间数据传递混乱：

// src/app/services/auth.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

export interface User {
  avatarUrl?: string;
  name: string;
  email: string;
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private currentUserSubject = new BehaviorSubject<User | null>(null);
  public currentUser$: Observable<User | null> = this.currentUserSubject.asObservable();

  // 登录/注册成功后调用此方法保存用户数据
  setCurrentUser(user: User): void {
    this.currentUserSubject.next(user);
    // 可选：把用户数据存入localStorage，页面刷新后不丢失
    localStorage.setItem('currentUser', JSON.stringify(user));
  }

  constructor() {
    // 初始化时从localStorage读取已保存的用户数据
    const storedUser = localStorage.getItem('currentUser');
    if (storedUser) {
      this.currentUserSubject.next(JSON.parse(storedUser));
    }
  }
}

3. 在登录/注册组件中写入用户数据 #

登录或注册接口调用成功后，调用setCurrentUser方法存储用户信息：

// 示例：登录组件逻辑
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';

constructor(private authService: AuthService, private router: Router) {}

login(email: string, password: string): void {
  // 假设此处调用登录API获取用户数据
  this.loginApi.login(email, password).subscribe((userData) => {
    this.authService.setCurrentUser({
      avatarUrl: userData.avatar,
      name: userData.nickname,
      email: userData.email
    });
    // 跳转到个人资料页
    this.router.navigate(['/profile']);
  });
}

4. 在个人资料组件中展示用户信息 #

订阅用户数据并渲染到模板：

组件类代码 #

// src/app/profile/profile.component.ts
import { Component } from '@angular/core';
import { AuthService, User } from '../services/auth.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent {
  currentUser$: Observable<User | null>;

  constructor(private authService: AuthService) {
    this.currentUser$ = this.authService.currentUser$;
  }
}

模板代码 #

<!-- src/app/profile/profile.component.html -->
<div class="profile-card" *ngIf="currentUser$ | async as user">
  <div class="avatar-wrapper">
    <img 
      [src]="user.avatarUrl || 'assets/default-avatar.png'" 
      alt="用户头像"
      class="avatar-img"
    >
  </div>
  <div class="user-details">
    <h3 class="user-name">{{ user.name }}</h3>
    <p class="user-email">{{ user.email }}</p>
  </div>
</div>

<!-- 未登录状态提示 -->
<div *ngIf="!(currentUser$ | async)" class="unauthorized">
  <p>请先登录查看个人资料</p>
  <button routerLink="/login">前往登录</button>
</div>

5. 添加路由保护（可选但推荐） #

防止未登录用户直接访问/profile路由，先创建守卫：

ng generate guard auth

实现守卫逻辑：

// src/app/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './services/auth.service';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate() {
    return this.authService.currentUser$.pipe(
      map(user => {
        if (user) return true;
        // 未登录则跳转到登录页
        this.router.navigate(['/login']);
        return false;
      })
    );
  }
}

在路由配置中应用守卫：

// src/app/app-routing.module.ts
import { AuthGuard } from './auth.guard';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  // ...其他路由
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }
];

内容的提问来源于stack exchange，提问作者Soy Diabs