带有 ngx-restangular 的 Angular 4 拦截器

Question

我正在使用 ngx-restangular使用 Angular 4。

我想拦截请求，如果 http 状态代码是 403，我想将用户重定向到登录页面。

现在我的 app.module.ts 上有了这段代码

/**
 * NGX-ANGULAR configs.
 */
// Function for setting the default restangular configuration
export function RestangularConfigFactory (RestangularProvider) {

  // Set base URL
  RestangularProvider.setBaseUrl('http://192.168.1.79:8080/api/');

  // If token not valid/expired
  RestangularProvider.addErrorInterceptor((response, subject, responseHandler) => {

    if (response.status === 403) {

      // Redirect user to login page
      //Router.navigateByUrl(['login']);

      return false; // error handled
    }
    return true; // error not handled
  });
}

Router.navigateByUrl(['login']); 显然不起作用。

我尝试从 @angular/router 导入 Router 并将其注入(inject) AppModule 构造函数，但无法访问 this 在 RestangularConfigFactory 函数中。

有人可以帮忙吗？

谢谢。

Answer 1

我在试图弄清楚同样的事情时遇到了你的问题，我想我会与你(以及其他正在寻找的人)分享我的解决方案。

当您在 imports 中设置 RestangularModule 模块时，您可以指定要传递给配置工厂的任何其他服务。就我而言，我已经通过了身份验证服务:

export function restangularConfigFactory(restangularProvider, auth) {
  // set base url and add token to all requests
  ...
}

@NgModule({
  ...
  imports: [
    ...
    RestangularModule.forRoot([AuthService], restangularConfigFactory)
  ],
  ...
})

所以我所要做的就是将 Router 添加到我的函数参数和我的服务列表中，就像这样(不要忘记 import { Router } from '@angular/路由器';):

export function restangularConfigFactory(restangularProvider, auth, router) {
  // set base url and add token to all requests
  ...
}

@NgModule({
  ...
  imports: [
    ...
    RestangularModule.forRoot([AuthService, Router], restangularConfigFactory)
  ],
  ...
})

然后我可以像在其他任何地方一样使用 router:

export function restangularConfigFactory(restangularProvider, auth, router) {
  ...
  restangularProvider.addErrorInterceptor((response, subject, responseHandler) => {
    if (response.status == 403) {
      router.navigate(['login']);
      return false;
    }
    else {
      return true;
    }
  });
  ...
}