Angular 7实现登录成功后显示用户名问题求助

看起来你已经搞定了登录跳转的核心功能，现在就差把用户信息展示出来啦。咱们一步步来解决：

第一步：让Laravel登录接口返回用户信息 #

首先你的Laravel后端目前应该只返回了access_token，得修改登录接口，让它同时返回登录用户的详细信息。比如在你的Laravel登录控制器里，验证成功后返回包含用户信息的响应：

// Laravel 登录接口示例代码
public function login(Request $request)
{
    $credentials = $request->only('email', 'password');

    if (!Auth::attempt($credentials)) {
        return response()->json(['error' => 'Unauthorized'], 401);
    }

    $user = Auth::user();
    $token = $user->createToken('MyApp')->accessToken;

    // 返回token和用户信息
    return response()->json([
        'access_token' => $token,
        'user' => $user // 这里返回用户模型，包含name、email等字段
    ]);
}

第二步：修改Angular的TokenService存储用户信息 #

你的TokenService现在只处理了token，得扩展它来存储用户信息。修改后的代码如下：

// TokenService 代码
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TokenService {

  constructor() { }

  // 修改handle方法，接收包含token和user的响应数据
  handle(data: any) {
    this.setToken(data.access_token);
    this.setUser(data.user); // 新增存储用户信息的方法
  }

  setToken(token: string) {
    localStorage.setItem('access_token', token);
  }

  // 新增存储用户信息到localStorage的方法
  setUser(user: any) {
    localStorage.setItem('user', JSON.stringify(user));
  }

  // 新增获取用户信息的方法
  getUser() {
    const user = localStorage.getItem('user');
    return user ? JSON.parse(user) : null;
  }

  // 登出时清理数据的方法（可选但建议添加）
  logout() {
    localStorage.removeItem('access_token');
    localStorage.removeItem('user');
  }
}

第三步：在仪表盘组件中获取并展示用户名 #

比如你的HomeComponent（仪表盘页面），修改它来获取用户信息并渲染到页面：

// HomeComponent 代码
import { Component, OnInit } from '@angular/core';
import { TokenService } from '../services/token.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  public currentUser: any;

  constructor(private Token: TokenService) { }

  ngOnInit(): void {
    this.currentUser = this.Token.getUser(); // 获取存储的用户信息
  }
}

然后在home.component.html模板里添加显示用户名的代码：

<!-- home.component.html -->
<div class="dashboard-welcome">
  <h2>欢迎回来，{{ currentUser.name }}！</h2>
  <!-- 如果需要显示邮箱可以写：{{ currentUser.email }} -->
</div>

额外提示：处理登录状态过期的情况 #

如果用户刷新页面或者token过期，建议在组件初始化时判断用户信息是否存在，比如在HomeComponent的ngOnInit里加个判断：

ngOnInit(): void {
  this.currentUser = this.Token.getUser();
  if (!this.currentUser) {
    // 如果没有用户信息，跳回登录页
    this.router.navigateByUrl('/login');
  }
}

这样整个流程就完整了：登录成功后后端返回token和用户信息，Angular将数据存储到本地，仪表盘页面读取并展示用户名。

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