如何在ionic中进行HTTP基本认证

npm install @angular/common@latest @angular/http@latest

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 获取用户名和密码（这里假设你已经在某处定义了这些变量）
    const username = 'yourUsername';
    const password = 'yourPassword';

    // 创建新的请求，添加Authorization头
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Basic ' + btoa(username + ':' + password))
    });

    // 发送请求
    return next.handle(authReq);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor'; // 引入拦截器

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule], // 添加HttpClientModule
  providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],
  bootstrap: [AppComponent],
  strategies: [IonicRouteStrategy]
})
export class AppModule {}