Angular 16.2中CanActivateFn的服务注入问题

1. 确认服务的单例注入 #

首先确保AuthenticateService是根级注入的，这样整个应用只会存在一个实例，彻底避免inject()创建新实例的问题：

@Injectable({
  providedIn: 'root' // 必须设置为root，保证全局单例
})
export class AuthenticateService {
  // 服务逻辑
}

2. 修正Signal的使用方式 #

如果用Signal存储header，要保证设置和读取的是同一个Signal实例，别搞成局部变量：

// 服务内定义Signal
private authorizationHeader = signal<string | null>(null);

// 设置header的方法
setAuthorizationHeader(header: string) {
  this.authorizationHeader.set(header);
}

// 获取header的方法
getAuthorizationHeader(): string | null {
  return this.authorizationHeader();
}

登录成功后务必调用setAuthorizationHeader传入正确值，可在调用处加日志确认值已被设置。

3. 处理页面刷新的情况 #

页面刷新后服务内的Signal会重置为初始null，这时候要从本地存储先恢复header：

// 服务构造函数中恢复缓存的header
constructor() {
  const savedHeader = localStorage.getItem('authorization');
  if (savedHeader) {
    this.authorizationHeader.set(savedHeader);
  }
}

// 登录时同步存到本地存储
login(credentials: any) {
  // ... 登录请求逻辑，拿到token后拼接header
  const authHeader = 'Bearer ' + token;
  this.setAuthorizationHeader(authHeader);
  localStorage.setItem('authorization', authHeader);
}

4. 检查AuthGuard的执行时机 #

CanActivateFn是在路由激活前执行的，要确保登录流程完全走完、header已经被设置后，才会触发守卫。如果是直接访问需要授权的路由（比如刷新页面），必须先从本地存储恢复header，否则肯定拿不到值。

快速排查点 #

• 登录后立即打印authService.getAuthorizationHeader()，确认值已存在
• 在服务构造函数中打印this的引用地址，对比登录时和守卫中注入的实例地址是否一致
• 别用服务内的局部变量存header，必须用类属性或Signal

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