Ionic 3：如何在Rest Provider错误处理函数中发布事件

没问题，我来帮你搞定这个需求！其实实现起来很简单，分两步就能完成——在你的Rest Provider里捕获401错误并发布事件，然后在app.component.ts里监听这个事件跳转到登录页。

首先，你需要在Rest Provider里注入Ionic的事件服务（如果是Ionic 4+，用@ionic/angular里的Events），然后在统一的错误处理函数里判断状态码是否为401，是的话就发布session:expired事件。

下面是完整的代码示例：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Events } from '@ionic/angular'; // Ionic 4+ 导入方式，旧版本请用 ionic-angular

@Injectable({
  providedIn: 'root'
})
export class RestProvider {
  myApiUrl = 'https://your-api-url.com'; // 替换成你的实际API地址

  constructor(
    private http: HttpClient,
    private events: Events // 注入Events服务
  ) { }

  // 示例API请求方法（你可以替换成自己的请求逻辑）
  fetchUserData() {
    return this.http.get(`${this.myApiUrl}/user`).subscribe(
      (response) => {
        // 处理正常响应逻辑
        console.log('获取用户数据成功:', response);
      },
      (error: HttpErrorResponse) => {
        // 调用统一错误处理函数
        this.handleRequestError(error);
      }
    );
  }

  // 统一处理请求错误的函数
  private handleRequestError(error: HttpErrorResponse) {
    // 重点：捕获401未授权状态码
    if (error.status === 401) {
      console.log('会话已过期，触发登录跳转事件');
      this.events.publish('session:expired'); // 发布session过期事件
    }

    // 其他错误的通用处理（根据你的需求调整）
    console.error('请求出错:', error.message || '未知错误');
  }
}

接下来，在app.component.ts里注入Events服务和Router，然后监听session:expired事件，一旦触发就跳转到登录页面，同时可以清除本地存储的授权token之类的信息。

代码示例：

import { Component } from '@angular/core';
import { Events } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  constructor(
    private events: Events,
    private router: Router
  ) {
    // 初始化时就监听会话过期事件
    this.setupSessionExpiryListener();
  }

  private setupSessionExpiryListener() {
    this.events.subscribe('session:expired', () => {
      // 跳转到登录页
      this.router.navigate(['/login']);
      // 可选：清除本地存储的授权信息
      localStorage.removeItem('authToken');
      // 也可以加个提示，比如用Toast告知用户会话过期
      // this.toastController.create({ message: '会话已过期，请重新登录', duration: 3000 }).then(toast => toast.present());
    });
  }
}

注意：Ionic的Events服务在新版本中已经被标记为废弃了，官方更推荐使用RxJS的Subject来实现事件通信，这样更符合Angular的生态规范。

具体做法如下：

1. 创建一个共享的会话事件服务 #

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

@Injectable({
  providedIn: 'root'
})
export class SessionEventService {
  // 创建一个Subject作为事件源
  private sessionExpiredSource = new Subject<void>();
  // 对外暴露Observable，防止外部直接调用next方法
  sessionExpired$ = this.sessionExpiredSource.asObservable();

  // 发布会话过期事件的方法
  publishSessionExpired() {
    this.sessionExpiredSource.next();
  }
}

2. 在Rest Provider中使用这个服务 #

import { SessionEventService } from './session-event.service'; // 导入刚才创建的服务

@Injectable({
  providedIn: 'root'
})
export class RestProvider {
  constructor(
    private http: HttpClient,
    private sessionEventService: SessionEventService // 注入服务
  ) { }

  private handleRequestError(error: HttpErrorResponse) {
    if (error.status === 401) {
      // 调用服务的方法发布事件
      this.sessionEventService.publishSessionExpired();
    }
    // 其他错误处理
  }
}

3. 在app.component.ts中订阅事件 #

import { SessionEventService } from './session-event.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  constructor(
    private sessionEventService: SessionEventService,
    private router: Router
  ) {
    // 订阅会话过期事件
    this.sessionEventService.sessionExpired$.subscribe(() => {
      this.router.navigate(['/login']);
      localStorage.removeItem('authToken');
    });
  }
}

这样做不仅更符合Angular的最佳实践，还能避免使用废弃API带来的潜在问题。

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