如何将后端的Token与用户信息传递至前端？附代码示例

当前代码情况 #

user.service.ts #

export class UserService {

  BASE_URL = "http://localhost:8082";
  constructor(private httpClient:HttpClient) {}

  public login(loginData:any){
    return this.httpClient.post(this.BASE_URL+"/authenticate",loginData);
  
  } 
}

login.component.ts #

export class LoginComponent implements OnInit {

  constructor(private userService:UserService){}

  ngOnInit(): void {}

  login(loginFormData:NgForm){
    this.userService.login(loginFormData.value).subscribe(
      (response) =>{
        console.log(response);
      },
      (error=>{
        console.log(error);
      })
    );
  }

}

具体实现步骤 #

1. 定义响应数据接口 #

先创建一个接口规范后端返回的结构，避免使用any类型带来的不确定性：

// auth-response.interface.ts
export interface AuthResponse {
  token: string;
  user: {
    id: number;
    username: string;
    email: string;
    // 按需补充后端实际返回的其他用户字段
  };
}

2. 修正UserService的返回类型 #

在UserService中指定请求返回类型为上述接口，让类型约束更明确：

export class UserService {

  BASE_URL = "http://localhost:8082";
  constructor(private httpClient:HttpClient) {}

  public login(loginData:any): Observable<AuthResponse> {
    return this.httpClient.post<AuthResponse>(`${this.BASE_URL}/authenticate`, loginData);
  } 
}

3. 存储Token与用户信息 #

登录成功后，将Token和用户信息存入localStorage，方便全局组件调用：

export class LoginComponent implements OnInit {

  constructor(private userService:UserService){}

  ngOnInit(): void {}

  login(loginFormData:NgForm){
    this.userService.login(loginFormData.value).subscribe(
      (response) =>{
        // 存储认证Token
        localStorage.setItem('authToken', response.token);
        // 存储用户信息（转成JSON字符串）
        localStorage.setItem('currentUser', JSON.stringify(response.user));
        
        // 登录成功后可跳转到目标页面，例如首页
        // this.router.navigate(['/home']);
      },
      (error=>{
        console.error('登录失败:', error);
      })
    );
  }

}

4. 全局获取与管理用户信息 #

在UserService中添加工具方法，方便其他组件快速获取Token和用户信息，同时支持登出清除数据：

export class UserService {

  BASE_URL = "http://localhost:8082";
  constructor(private httpClient:HttpClient) {}

  public login(loginData:any): Observable<AuthResponse> {
    return this.httpClient.post<AuthResponse>(`${this.BASE_URL}/authenticate`, loginData);
  } 

  // 获取当前用户信息
  getCurrentUser() {
    const userStr = localStorage.getItem('currentUser');
    return userStr ? JSON.parse(userStr) : null;
  }

  // 获取认证Token
  getAuthToken() {
    return localStorage.getItem('authToken');
  }

  // 登出时清除存储的认证数据
  logout() {
    localStorage.removeItem('authToken');
    localStorage.removeItem('currentUser');
  }
}

5. 携带Token发起权限请求 #

后续需要权限验证的接口，在请求头中携带Token即可完成身份校验：

// 示例：获取用户个人详情接口
getUserProfile(): Observable<any> {
  const token = this.getAuthToken();
  const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
  return this.httpClient.get(`${this.BASE_URL}/user/profile`, { headers });
}

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