使用 AngularJS 拦截器阻止 HTTP 基本身份验证对话框 [英] Preventing HTTP Basic Auth Dialog using AngularJS Interceptors

查看:28
本文介绍了使用 AngularJS 拦截器阻止 HTTP 基本身份验证对话框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

一个具体的例子:

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

在 AngularJS 应用方面,我查看了 .

I'm building an AngularJS (1.2.16) web app with a RESTful API, and I'd like to send 401 Unauthorized responses for requests where authentication information is invalid or not present. When I do so, even with an HTTP interceptor present, I see the browser-presented basic "Authentication Required" dialog when an AJAX request is made via AngularJS. My interceptor runs after that dialog, which is too late to do something useful.

A concrete example:

My backend API returns 401 for /api/things unless an authorization token is present. Nice and simple.

On the AngularJS app side, I've looked at the docs and set up an interceptor like this in the config block:

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

When I load my app, remove the authentication token, and perform an AJAX call to /api/things (to hopefully trigger the above interceptor), I see this:

If I cancel that dialog, I see the console.log output of "Got a 401" that I was hoping to see instead of that dialog:

Clearly, the interceptor is working, but it's intercepting too late!

I see numerous posts on the web regarding authentication with AngularJS in situations just like this, and they all seem to use HTTP interceptors, but none of them mention the basic auth dialog popping up. Some erroneous thoughts I had for its appearance included:

  • Missing Content-Type: application/json header on the response? Nope, it's there.
  • Need to return something other than promise rejection? That code always runs after the dialog, no matter what gets returned.

Am I missing some setup step or using the interceptor incorrectly?

解决方案

Figured it out!

The trick was to send a WWW-Authenticate response header of some value other than Basic. You can then capture the 401 with a basic $http interceptor, or something even more clever like angular-http-auth.

这篇关于使用 AngularJS 拦截器阻止 HTTP 基本身份验证对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆