Angular 4/5组件间数据共享：登录令牌跨组件传递失效

嘿，我看你在Angular里用共享服务传递登录后的access token遇到问题了，咱们一步步来排查和解决～

首先看你贴的代码，updateUserInfo方法好像没写完，应该是要调用this.userInfo.next(message)来发送新的用户信息，这是Subject传递数据的关键步骤。另外还有几个常见的坑可能导致你的服务没生效，我给你整理了完整的解决方案：

你原来用的是Subject，但它有个问题：新订阅的组件拿不到之前已经发送过的值。登录后token已经存在，后续初始化的组件需要直接获取到这个token，所以换成BehaviorSubject会更合适，它会保存当前的最新值，给新订阅者自动发送这个值。

完善后的DataService代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 这里一定要加！确保整个应用只有一个服务实例
})
export class DataService {
  // 初始值设为null，后续登录后更新
  private userInfo = new BehaviorSubject<any>(null);
  currentuserInfo$ = this.userInfo.asObservable();

  constructor() { }

  updateUserInfo(userData: any) {
    // 调用next方法发送最新的用户信息（包含token）
    this.userInfo.next(userData);
  }
}

登录成功拿到access token后，调用服务的updateUserInfo方法把token传进去：

import { Component } from '@angular/core';
import { DataService } from './data.service';
// 假设你有专门的登录服务处理登录请求
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  constructor(
    private dataService: DataService,
    private authService: AuthService
  ) {}

  handleLogin(username: string, password: string) {
    this.authService.login(username, password).subscribe((response) => {
      // 假设接口返回的access token在response.data.accessToken里
      const userInfo = {
        accessToken: response.data.accessToken,
        // 可以顺便存其他用户信息，比如用户名、角色等
        username: response.data.username
      };
      // 更新共享服务里的用户信息
      this.dataService.updateUserInfo(userInfo);
      // 登录成功后的跳转逻辑，比如跳转到首页
    });
  }
}

在需要调用API的非父子组件里，订阅currentuserInfo$来获取token，然后在请求头里带上：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from './data.service';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-protected-page',
  templateUrl: './protected-page.component.html'
})
export class ProtectedPageComponent implements OnInit, OnDestroy {
  // 保存订阅对象，组件销毁时取消订阅，防止内存泄漏
  private userInfoSubscription!: Subscription;
  private accessToken?: string;

  constructor(
    private dataService: DataService,
    private http: HttpClient
  ) {}

  ngOnInit() {
    // 订阅用户信息的变化
    this.userInfoSubscription = this.dataService.currentuserInfo$.subscribe((userInfo) => {
      if (userInfo) {
        this.accessToken = userInfo.accessToken;
        // 拿到token后就可以调用需要权限的API了
        this.loadProtectedData();
      }
    });
  }

  loadProtectedData() {
    if (!this.accessToken) return;
    // 设置请求头，把token带进去
    const requestHeaders = {
      Authorization: `Bearer ${this.accessToken}`
    };
    this.http.get('https://your-api-domain.com/protected-data', { headers: requestHeaders })
      .subscribe((data) => {
        // 处理API返回的数据
        console.log('受保护的数据:', data);
      });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅
    this.userInfoSubscription.unsubscribe();
  }
}

• 确保服务是单例：一定要用providedIn: 'root'，不要在多个模块的providers数组里重复声明这个服务，否则会创建多个服务实例，数据肯定无法共享。
• 用BehaviorSubject替代Subject：如果你的组件是在登录之后才初始化的，Subject不会给它发送之前的token，而BehaviorSubject会直接把当前最新的token发给它。
• 记得取消订阅：组件销毁时一定要取消订阅，避免内存泄漏。如果觉得手动订阅麻烦，也可以在模板里用async管道，Angular会自动帮你管理订阅：

  <div *ngIf="dataService.currentuserInfo$ | async as userInfo">
    当前用户：{{ userInfo.username }}
  </div>
  

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