Ionic+JWT登录模块嵌套订阅问题：确保AccessToken存储后再请求

这个问题我太熟悉了——核心原因就是你没处理好异步操作的执行顺序！你的StorageService.store()是异步方法（用了async/await），但当前代码里你调用它之后，立刻就发起了getUserProfile()请求，完全没等token的存储操作完成。这就导致拦截器去Capacitor Storage里读token的时候，写入操作可能还没结束，自然拿到null。

问题代码的核心缺陷 #

你现在的代码逻辑是：

1. 登录成功拿到token
2. 调用store()存token（异步，立刻返回Promise）
3. 马上订阅getUserProfile()请求
   但第3步不会等第2步的Promise完成，所以拦截器读取token时，存储可能还在进行中。

解决方案1：用async/await等待存储完成 #

最简单的修改是把订阅内部的逻辑改成异步，等待token存储完成后再发起用户信息请求：

async loginAction() {
  if (this.validateInputs()) {
    console.log(this.postData);
    this.authService.login(this.postData).subscribe(
      async (res: any) => {
        console.log(res);
        if (res.token) {
          // 关键：等待token存储操作完全完成
          await this.storageService.store('accessToken', res.token);
          // 现在再调用用户信息接口，拦截器就能拿到token了
          this.authService.getUserProfile().subscribe((profile: any) => {
            console.log(profile);
            this.storageService
              .store(AuthConstants.AUTH, profile)
              .then(() => {
                this.router.navigate(['home']);
              });
          });
        }
      },
      (error: any) => {
        this.toastService.presentToast('Network Issue.');
      }
    );
  } else {
    this.toastService.presentToast(
      'Please enter email/username or password.'
    );
  }
}

解决方案2：用RxJS操作符避免嵌套订阅（更推荐） #

嵌套订阅会让代码变得臃肿且难以维护，用RxJS的switchMap操作符可以把异步流程串起来，既保证顺序，又让代码更整洁：

首先导入from操作符（用来把Promise转成Observable）：

import { from } from 'rxjs';
import { switchMap } from 'rxjs/operators';

然后重构loginAction：

loginAction() {
  if (this.validateInputs()) {
    console.log(this.postData);
    this.authService.login(this.postData)
      .pipe(
        // 第一步：拿到token后，先完成存储
        switchMap((res: any) => {
          if (!res.token) {
            throw new Error('Login failed: No token received');
          }
          // 把异步的store方法转成Observable，等待它完成
          return from(this.storageService.store('accessToken', res.token)).pipe(
            // 存储完成后，发起用户信息请求
            switchMap(() => this.authService.getUserProfile())
          );
        }),
        // 第二步：拿到用户信息后，完成存储
        switchMap((profile: any) => {
          return from(this.storageService.store(AuthConstants.AUTH, profile));
        })
      )
      .subscribe({
        next: () => {
          // 所有异步操作完成后，跳转到首页
          this.router.navigate(['home']);
        },
        error: (err) => {
          console.error('Login flow failed:', err);
          this.toastService.presentToast(err.message || 'Network Issue.');
        }
      });
  } else {
    this.toastService.presentToast(
      'Please enter email/username or password.'
    );
  }
}

为什么这个方案更好？ #

1. 严格保证执行顺序：每一步操作都必须等前一步完成才会执行，从根本上解决了token未存储就发起请求的问题。
2. 统一错误处理：所有流程的错误都会走到同一个error回调里，避免了嵌套订阅时错误处理分散的问题。
3. 代码更清晰：用RxJS操作符串联流程，比嵌套订阅更易读和维护。

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