首次登录需刷新页面才能传递auth信息的技术问题求助

问题现状 #

登录成功后跳转至首页，不刷新页面的情况下，应用无法获取到localStorage中的授权信息；刷新页面后该问题消失。预期逻辑是登录完成后，应用能直接读取localStorage里的accessToken并自动向API上报授权信息。

核心原因 #

1. 应用初始化时仅读取一次localStorage的token，登录后未主动更新全局授权上下文
2. Apollo Client的请求头未在登录成功后即时更新，导致后续API请求未携带有效token

解决方案 #

1. 改造AuthService，新增状态监听与授权头更新逻辑 #

在AuthService中添加BehaviorSubject维护登录状态，并提供方法主动更新Apollo的授权上下文：

import { Injectable } from '@angular/core';
import { Apollo } from 'apollo-angular';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 用于监听登录状态的可观察对象
  private authStatusSubject = new BehaviorSubject<boolean>(false);
  public authStatus$ = this.authStatusSubject.asObservable();

  constructor(private apollo: Apollo) {
    // 应用启动时检查本地存储是否有token
    const savedToken = localStorage.getItem('accessToken');
    if (savedToken) {
      this.updateAuthHeader(savedToken);
      this.authStatusSubject.next(true);
    }
  }

  loginService(auth: Auth): Observable<ResponseModel> {
    return this.apollo
      .mutate<any>({
        mutation: this.LOGIN_USER,
        variables: { auth },
      })
      .pipe(map(result => result.data.login));
  }

  // 更新Apollo Client的授权请求头
  private updateAuthHeader(token: string) {
    this.apollo.client.setContext(() => ({
      headers: {
        Authorization: `Bearer ${token}`
      }
    }));
  }

  // 登录成功后调用，同步状态与授权信息
  public onLoginSuccess(token: string) {
    localStorage.setItem('accessToken', token);
    this.updateAuthHeader(token);
    this.authStatusSubject.next(true);
  }
}

2. 修改登录组件，调用状态同步方法 #

在登录成功后，调用AuthService的onLoginSuccess方法，而非仅存入localStorage：

login() {
  this.isLoading = true;

  if (this.form.invalid) {
    this._snackBar.open('请填写所有字段。', '确定', { duration: 3000 });
    this.isLoading = false;
    return;
  }

  const auth = {
    email: this.form.value.email,
    password: this.form.value.password,
  };

  this.authService.loginService(auth).subscribe((data) => {
    this.isLoading = false;
    if (!data.isSuccessful) {
      this._snackBar.open(data.message, '确定', { duration: 2000 });
      return;
    }
    this._snackBar.open(data.message, '确定', { duration: 2000 });
    // 同步授权状态与请求头
    this.authService.onLoginSuccess(data.data);
    this.router.navigate(['/']);
  });
}

3. 其他组件监听登录状态（可选） #

如果需要在其他组件中响应登录状态变化，可订阅authStatus$：

// 示例：首页组件
ngOnInit(): void {
  this.authService.authStatus$.subscribe(isLoggedIn => {
    if (isLoggedIn) {
      // 执行授权后的操作，比如向API上报授权信息
    }
  });
}

内容的提问来源于stack exchange，提问作者İrfan Yunus Soydan