在ionic / angular中添加http拦截器后，翻译不起作用

问题描述

翻译在本地计算机上工作正常。但是，当我使用离子生成apk并将其安装在设备中时，它不起作用。它引发了错误。

我添加了以下代码。如果有东西缺失，请纠正我

//这是我用于HTTP拦截器的代码

import { Injectable } from '@angular/core';
import { HttpEvent,HttpInterceptor,HttpRequest,HttpResponse,HttpHandler,HttpErrorResponse,HTTP_INTERCEPTORS,HttpHeaders } from '@angular/common/http';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable,throwError } from 'rxjs';
import { map,catchError } from 'rxjs/operators';
import { Storage } from '@ionic/storage';

import consts from './consts';

@Injectable()
export class ApiHttpInterceptor implements HttpInterceptor {
  constructor(private router: Router,public http: HttpClient,public storage: Storage) { }

  intercept(request: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.storage.get('token');
    const refreshToken = this.storage.get('refresh-token');

    request = request.clone({
      setHeaders: {
        Authorization: 'Bearer ' + token,// 'Content-Type': 'application/json',// Accept: 'application/json',},url: request.url.indexOf('http') >= 0 ? request.url : consts.API_URL + request.url,});

    return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        return event;
      }),catchError((error: HttpErrorResponse) => {
        console.log('HttpErrorResponse',error);
        if (error.status === 401) {
          this.storage.clear();
          this.router.navigate(['/login']);
        }
        return throwError(error);
      }),);
  }
}

//这是我在翻译加载程序中使用的代码

export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http,'./assets/i18n/','.json');
}

//这是我在我的app.module.ts中使用的代码

@NgModule({
  declarations: [AppComponent],entryComponents: [],imports: [
    browserModule,IonicModule.forRoot(),AppRoutingModule,HttpClientModule,TranslateModule.forRoot({
      defaultLanguage: 'en',loader: {
        provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [HttpClient]
      }
    }),IonicStorageModule.forRoot({ name: 'da-merchant',driverOrder: ['indexeddb','sqlite','websql'] }),ComponentsModule
  ],providers: [
    StatusBar,SplashScreen,{ provide: RouteReuseStrategy,useClass: IonicRouteStrategy },Events,{
      provide: HTTP_INTERCEPTORS,useClass: ApiHttpInterceptor,multi: true,],bootstrap: [AppComponent]
})

环境

    "@angular/common": "~9.1.6","@angular/core": "~9.1.6","@angular/forms": "~9.1.6","@angular/platform-browser": "~9.1.6","@angular/platform-browser-dynamic": "~9.1.6","@angular/router": "~9.1.6","@capacitor/android": "^2.4.0","@capacitor/core": "2.4.0","@capacitor/ios": "^2.4.0","@ionic-native/core": "^5.0.7","@ionic-native/splash-screen": "^5.0.0","@ionic-native/status-bar": "^5.0.0","@ionic/angular": "^5.0.0","@ionic/storage": "^2.3.0","@mdi/font": "^5.5.55","@ngx-translate/core": "^13.0.0","@ngx-translate/http-loader": "^6.0.0","rxjs": "~6.5.1","tslib": "^1.10.0","zone.js": "~0.10.2"

这里的问题仅当我在安装apk后在设备中运行ionic应用程序时出现。正如我提到的，在本地环境中工作正常。

解决方法

这与以下行有关：

request.url.indexOf('http') >= 0 ? request.url : consts.API_URL + request.url

在使用Ionic的情况下，该页面在本地Web服务器上运行，该服务器运行在某些localhost端口上。翻译URL是相对于当前URL的，因此不带“ http”。因此，您的代码将此请求发送到后端。

如果我是您，我将删除此行代码，仅在调用时设置正确的URL。就像在任何地方调用后端一样，您只需编写consts.API_URL + '...'

,

感谢@MauriceNino的提示

我通过以下代码对其进行了修复

export function HttpLoaderFactory(http: HttpClient) {
  const path = window.location.origin + '/assets/i18n/';
  return new TranslateHttpLoader(http,path,'.json');
}

问题出在路径/ URL。在本地环境中，它命中 https：// localhost：8100 / ，但在实际设备中，它仅命中 https：// localhost / 。没有端口号。

我自己回答，因为它可能会帮助遇到类似问题的人。