Question

我编写了一个用于调用WEB API的身份验证服务（AuthenticationService）。我最近了解了拦截器。我想创建一个拦截器来拦截请求并根据AuthenticationService的状态修改头。

将AuthenticationService注入拦截器时遇到了一些问题。当我这样做时，我的页面被打破了。我看到{{MyVariableName}}之类的东西而不是值。提交表单也不起作用。点击按钮时没有任何反应。

我不知道问题是什么，因为我找不到任何错误信息或任何东西来表明问题所在。控制台中没有任何东西。页面刚好坏了。如果我从拦截器中删除AuthenticationService，一切都会再次运行。下面是我的拦截器代码：

app.factory('authInjector', ['AuthenticationService', function (AuthenticationService) {
var authInjector = {
    request: function (config) {
        config.headers['x-session-token'] = 'test'; 
        return config;
    }
};
    return authInjector;
 }]);

app.config(['$httpProvider', function ($httpProvider) {
       $httpProvider.interceptors.push('authInjector');
}]);

＆＃34;应用＆＃34;在另一个JavaScript文件（app.js）中定义。这也是AuthenticationService所在的位置。服务声明如下：

app.service('AuthenticationService', function ($http) { ... }

我的脚本按以下顺序加载：

    <script src="~/Scripts/app.js"></script>
    <script src="~/Scripts/injector.js"></script>

我也试过在我的拦截器代码中使用$ injector，但它毫无价值。我收到一条错误，指出$ injector在运行时未定义。

var AuthService = $injector.get('AuthenticationService');

有人能说出我的拦截器问题与AuthenticationService有什么关系？

由于

编辑：请求的信息：

<html ng-app="MyAppName">

app.js：

angular.module('MyAppName').controller('LoginController', function ($scope, $rootScope, $window, AuthenticationService) {

var app = angular.module('MyAppName', ['ngRoute', 'ngSanitize', 'ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

控制台中没有错误。

Answer 1

在 authInjector ：

中尝试此操作

var AuthenticationService = $injector.get('AuthenticationService');

改变：

app.factory('authInjector', ['AuthenticationService', function (AuthenticationService) {

为：

app.factory('authInjector', ['$injector', function ($injector) {

脚本顺序：

<script src="~/app/app.js"></script> // create the app and dependencies
<script src="~/app/authentication.service.js"></script> // create the authentication service
<script src="~/app/auth-injector.service.js"></script> // create the interceptor factory
<script src="~/app/app.config.js"></script> //push the interceptor to httpProvider

Answer 2

看起来你的拦截器中有circular dependency。您尝试在尝试配置$http的同时注入使用$httpProvider的服务。

一种解决方案是在拦截器的authService属性中手动注入request。

app.factory('authInjector', ['$injector', function($injector) {

  var authInjector = {
    request: function (config) {
      var AuthService = $injector.get('AuthService');
      // Do whatever you need to do with AuthService
      config.headers['x-session-token'] = 'test'; 
      return config;
    }
  };
  return authInjector;
}]);

为什么我不能将服务注入Angular工厂/注入器？

2 个答案: