使用AngularJS拦截器防止HTTP Basic Auth对话

Question

我正在使用RESTful API构建一个AngularJS(1.2.16)Web应用程序,并且我希望针对身份验证信息无效或不存在的请求发送401 Unauthorized响应.当我这样做时,即使存在HTTP拦截器,当通过AngularJS发出AJAX请求时,我会看到浏览器呈现的基本"Authentication Required"对话框.我的拦截器在该对话框之后运行,这对于做一些有用的事情已经太晚了.

一个具体的例子:

/api/things除非存在授权令牌,否则我的后端API将返回401 .很好,很简单.

在AngularJS应用程序方面,我查看了文档并在config块中设置了这样的拦截器:

$httpProvider.interceptors.push(['$q', function ($q) {
  return {
    'responseError': function (rejection) {
      if (rejection.status === 401) {
        console.log('Got a 401')
      }
      return $q.reject(rejection)
    }
  }
}])

当我加载我的应用程序时,删除身份验证令牌,并执行AJAX调用/api/things(希望触发上面的拦截器),我看到:

如果我取消该对话框,我会看到console.log我希望看到的"获得401" 的输出而不是该对话框:

很明显,拦截器正在工作,但它的拦截太迟了!

我在网上看到很多关于AngularJS在这种情况下进行身份验证的帖子,他们似乎都使用HTTP拦截器,但没有一个提到弹出的基本身份验证对话框.我对其外观的一些错误想法包括:

• Content-Type: application/json响应中缺少标题？不,它就在那里.
• 需要退还承诺拒绝以外的其他内容吗？无论返回什么内容,该代码始终在对话框后运行.

我错过了一些设置步骤或错误地使用拦截器吗？

Answer 1

弄清楚了!

诀窍是发送WWW-Authenticate除了之外的某些值的响应头Basic.然后,您可以使用基本$http拦截器捕获401 ,或者像angular-http-auth更聪明的东西.

Answer 2

我和Spring Boot Security(HTTP基本版)一起遇到了这个问题,因为Angular 1.3你必须设置$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';弹出窗口才能显示.