使用TypeScript的AngularJs身份验证

我遵循指南在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);
            }
        };
    }
}

---

我将如何着手解决此错误？谢谢

也许您的类AuthInterceptor应该输入IHttpInterceptorFactory:

export class AuthInterceptor implements IHttpInterceptorFactory {
}

---

找到一篇博客文章，展示两种不同的方法：

接近0

类APICALINTERCEPTOR实现ng.IHttpInterceptor{
//@ngInject
静态工厂（$q:ng.IQService）：APICALINTERCEPTOR{
返回新的ApicalInterceptor（$q）；
}
构造函数（私有$q:ng.IQService）{
}
//使用arrow函数创建为实例方法（请参见注释）
请求=（config:ng.IRequestConfig）：ng.IRequestConfig=>{
console.info（'Request:'，config）；
//修改配置
返回配置；
};
//使用arrow函数创建为实例方法（请参见注释）
答复=(
答复：ng.ihttpromisecallbackarg
)：ng.IPromise=>{
console.info（'响应：'，响应）；
//修改响应
返回此。$q.when（响应）；
};
}
让httpConfig=（$httpProvider:ng.IHttpProvider）=>{
/*将工厂函数推送到$httpProvider数组中
*拦截器（实现IHttpInterceptorFactory）*/
$httpProvider.interceptors.push（ApiCallInterceptor.factory）；
};
角度.module（'app'）.config（httpConfig）；

方法1

类HttpInterceptor{
构造函数（）{
['request'、'requestError'、'response'、'responseError']
.forEach（（方法）=>{
if（此[方法]）{
this[method]=this[method].bind（this）；
}
});
}
}
类ApiCallInterceptor扩展HttpInterceptor
实现ng.IHttpInterceptor{
//@ngInject
静态工厂（$q:ng.IQService）：APICALINTERCEPTOR{
返回新的ApicalInterceptor（$q）；
}
构造函数（私有$q:ng.IQService）{
超级（）；
}
请求（config:ng.IRequestConfig）：ng.IRequestConfig{
console.info（'Request:'，config）；
//修改配置
返回配置；
};
回应(
答复：ng.ihttpromisecallbackarg
)：ng.IPromise{
console.info（'响应：'，响应）；
//修改响应
返回此。$q.when（响应）；
};
}
让httpConfig=（$httpProvider:ng.IHttpProvider）=>{
/*推动工厂（实现IHttpInterceptorFactory）
到$httpProvider拦截器数组*/
$httpProvider.interceptors.push（ApiCallInterceptor.factory）；
};

export class AuthInterceptor implements IHttpInterceptorFactory {
}

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);

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);
};