1

我创建了一个名为的 Angular 模块DataModule，其中包含用于通过令牌安全的 HTTP API 访问我的后端的服务。401 Unauthorized关于 HTTP 访问控制错误，例如403 Forbidden我希望能够重定向到/login或尝试刷新令牌等。

我想在 Ionic 应用程序中重新使用它DataModule，所以我不希望与标准@angular/router RouterModule或其他任何东西有任何耦合。

目前，我在导入时通过 forRoot 方法传入一些原始DataModule值AppModule：

DataModule.forRoot({
  url: environment.apiEndpoint,
  token() {
     return localStorage.getItem('auth_token')
  },
  onError(errors: any) {
     console.log(this);
  }
});

我需要onError回调才能调用router.navigate('/login')或类似的功能，但由于这是一个简单的配置对象，我认为router现阶段无法注入。

我正在寻找一种方法来传递这样的东西，并且我已经审查了其他几个流行的 ng 项目，例如ngx-translate,angularitics2并且ngx-restangular它们都传递了似乎然后由组件返回的提供程序。这是通过传入实现包中保存的接口的 AuthException 服务或类似服务来实现我所追求的方法DataModule吗？

更新：

我最终从我提到的项目中获得了这个想法，即我DataModule有一个默认的错误处理服务，基本上什么都不做。然后，我在 forRoot 中注入一个特定于应用程序的更好的错误处理类，然后在提供程序中使用它：

static forRoot(config: any): ModuleWithProviders {

    return {
      ngModule: DataModule,
      providers: [
        config.authExceptionService || AuthExceptionService,
        { provide: CONFIG, useValue: config },
        {
          provide: ApiService,
          useFactory: ApiServiceFactory,
          deps: [Http, config.authExceptionService || AuthExceptionService, CONFIG]
        },
      ]
    }
  }

我ApiServiceFactory的参考：

export function ApiServiceFactory(http: Http, authException: AuthExceptionService, config: any) {

  return new ApiService(http, authException, {
    url: config.url,
    token: config.token
  });
}

我还必须使用 anInjectionToken来提供我的配置对象作为工厂的依赖项：

export const CONFIG = new InjectionToken<any>('CONFIG');

在我的主应用程序中，我执行以下操作：

DataModule.forRoot({
      authExceptionService: AppAuthExceptionService,
      url: environment.apiEndpoint,
      token() {
        return localStorage.getItem('auth_token')
      }
    });

如果这种方法存在任何潜在问题，很高兴听到任何人的意见。我希望我应该能够在 Ionic 应用程序中使用这个模块，如下所示：

DataModule.forRoot({
      authExceptionService: MobileAppAuthExceptionService,
      url: environment.apiEndpoint,
      token() {
        return storage.getItem('auth_token') // ionic uses different storage
      }
    })
4

2 回答 2

0

您可以扩展Http并应用过滤器

export class MyHttp extends Http {
   //... 
   constructor(){super()}

   get(){
      super.get()
        .filter(x => {
         // do your logic here
         if(x.status === 403){
            router.navigate( errorPage )
            return false;
         }             
      })
   }
}

或者使用map并抛出错误

if (response.status === 403) {
   throw Observable.throw(response);  
 }

并有一个执行重定向的 catch 函数（imo 是更好的方法）。

于 2017-06-12T14:22:15.537 回答
0

一种可能的解决方案是在每个项目中扩展 DataModule 并分别覆盖 onError 和构造函数方法。

export class MyDataModule extends DataModule {

  static ForRoot(...){
    ...
  }

  constructor(...args, private router: Router){
    super(...args)
  }

  onError() {
    this.router.navigate(errorPage);
  }
}

然后在您的离子应用程序中，您可以通过其他方式处理错误。

于 2017-06-12T15:36:16.573 回答