Question

我正在关注this指南，以在我的angularjs应用程序中实现令牌基本身份验证。我是新手，输入脚本和角度。这么说，

export class Routes {
    static $inject = ["$routeProvider", "$httpProvider"];
    static configureRoutes($routeProvider: ng.route.IRouteProvider, $httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthInterceptor); <<--Error Here
    }
}



export class AuthInterceptor {
    constructor($rootScope, $q, authEvents) {
        return {
            responseError: function (response) {
                $rootScope.$broadcast({ 401: authEvents.notAuthenticated },[response.status], response);
                return $q.reject(response);
            }
        };
    }
}

错误1'typeof AuthInterceptor'类型的参数不可分配给   'string |的类型参数IHttpInterceptorFactory | （字符串|   IHttpInterceptorFactory）[]”。

类型'typeof AuthInterceptor'不能赋值为'（string |   IHttpInterceptorFactory）[]”。 app.routes.ts

js code我正在尝试转换

.factory('AuthInterceptor', function ($rootScope, $q, AUTH_EVENTS) {
  return {
    responseError: function (response) {
      $rootScope.$broadcast({
        401: AUTH_EVENTS.notAuthenticated,
      }[response.status], response);
      return $q.reject(response);
    }
  };
})

我将如何解决此错误？感谢

Answer 1

也许你的类AuthInterceptor应该强制IHttpInterceptorFactory：

export class AuthInterceptor implements IHttpInterceptorFactory {
}

Answer 2

发现一篇博文显示了两种不同的方法：

http://www.couchcoder.com/angular-1-interceptors-using-typescript/

方法0

class ApiCallInterceptor implements ng.IHttpInterceptor {
  // @ngInject
  static factory($q:ng.IQService):ApiCallInterceptor {
    return new ApiCallInterceptor($q);
  }

  constructor(private $q:ng.IQService) {
  }

  // created as instance method using arrow function (see notes)
  request = (config:ng.IRequestConfig):ng.IRequestConfig => {
    console.info('Request:', config);

    // modify config

    return config;
  };

  // created as instance method using arrow function (see notes)
  response = <T>(
      response: ng.IHttpPromiseCallbackArg<T>
  ):ng.IPromise<T> => {
    console.info('Response:', response);

    // modify response

    return this.$q.when(response);
  };
}

let httpConfig = ($httpProvider:ng.IHttpProvider) => {
  /* push the factory function to the array of $httpProvider
   * interceptors (implements IHttpInterceptorFactory) */
  $httpProvider.interceptors.push(ApiCallInterceptor.factory);
};

angular.module('app').config(httpConfig);

方法1

class HttpInterceptor {
  constructor() {
    ['request', 'requestError', 'response', 'responseError']
        .forEach((method) => {
          if(this[method]) {
            this[method] = this[method].bind(this);
          }
        });
  }
}

class ApiCallInterceptor extends HttpInterceptor
                         implements ng.IHttpInterceptor {
  // @ngInject
  static factory($q:ng.IQService):ApiCallInterceptor {
    return new ApiCallInterceptor($q);
  }

  constructor(private $q:ng.IQService) {
    super();
  }

  request(config:ng.IRequestConfig):ng.IRequestConfig {
    console.info('Request:', config);

    // modify config

    return config;
  };

  response<T>(
      response: ng.IHttpPromiseCallbackArg<T>
  ):ng.IPromise<T> {
    console.info('Response:', response);

    // modify response

    return this.$q.when(response);
  };
}

let httpConfig = ($httpProvider:ng.IHttpProvider) => {
  /* push the factory (implements IHttpInterceptorFactory) 
     to the array of $httpProvider interceptors */
  $httpProvider.interceptors.push(ApiCallInterceptor.factory);
};

使用TypeScript进行AngularJs身份验证

2 个答案:

方法0

方法1