Prevenire la finestra di dialogo di autenticazione HTTP utilizzando AngularJS Interceptors

Question

Sto costruendo un'app web AngularJS (1.2.16) con un'API RESTful e desidero inviare 401 risposte non autorizzate per le richieste in cui le informazioni di autenticazione non sono valide o non sono presenti. Quando lo faccio, anche con un intercettore HTTP presente, vedo la finestra di dialogo "Autenticazione richiesta" di base del browser quando una richiesta AJAX viene effettuata tramite AngularJS. Il mio intercettore corre dopo il in quella finestra di dialogo, che è troppo tardi per fare qualcosa di utile.

Un esempio concreto:

mio backend API restituisce 401 per /api/things a meno che un token di autorizzazione è presente. Bello e semplice

Sul lato app AngularJS, ho guardato il docs e impostare un intercettore come questo nel config blocco:

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

Quando carico la mia app, rimuovere il token di autenticazione, ed eseguire un AJAX chiamata a /api/things (si spera innescare l'intercettore sopra), vedo questo:

Se cancello che finestra, vedo il console.log uscita "Ha ottenuto un 401" che speravo di vedere invece di quel dialogo:

Chiaramente, l'intercettore sta lavorando, ma è intercettare troppo tardi!

Vedo numerosi messaggi sul Web relativi all'autenticazione con AngularJS in situazioni come questa, e tutti sembrano utilizzare intercettori HTTP, ma nessuno di loro menziona la finestra di dialogo di autenticazione di base. Alcuni pensieri errati che ho avuto per la sua comparsa inclusi:

• Manca l'intestazione Content-Type: application/json sulla risposta? No, è lì.
• È necessario restituire qualcosa di diverso dalla promessa di rifiuto? Questo codice viene sempre eseguito dopo la finestra di dialogo, indipendentemente da ciò che viene restituito.

Mi manca qualche passaggio di configurazione o uso l'intercettore in modo errato?

Answer 1

Capito!

Il trucco era inviare un'intestazione di risposta WWW-Authenticate di un valore diverso da Basic. È quindi possibile acquisire il 401 con un intercettore di base $http o qualcosa di ancora più intelligente come angular-http-auth.

Answer 2

Per riferimento futuro

mi è venuta in mente questa soluzione quando si cerca di gestire 401 errori. Non ho avuto la possibilità di riscrivere Basic a x-Basic o qualcosa di simile, quindi ho deciso di gestirlo sul lato client con Angular.

Quando si avvia un logout, provare prima a effettuare una richiesta errata con un utente falso per eliminare le credenziali attualmente memorizzate nella cache.

Ho questa funzione di fare le richieste (che sta utilizzando le chiamate asynch disabili di $.ajax con jQuery):

function authenticateUser(username, hash) { 
    var result = false; 
    var encoded = btoa(username + ':' + hash); 

    $.ajax({ 
     type: "POST", 
     beforeSend: function (request) { 
      request.setRequestHeader("Authorization", 'Basic ' + encoded); 
     }, 
     url: "user/current", 
     statusCode: { 
      401: function() { 
       result = false; 
      }, 
      200: function (response) { 
       result = response; 
      } 
     }, 
     async: false 
    }); 

    return result; 
} 

Così, quando provo ad accedere un utente fuori, questo accade:

//This will send a request with a non-existant user. 
//The purpose is to overwrite the cached data with something else 
accountServices.authenticateUser('logout','logout'); 

//Since setting headers.common.Authorization = '' will still send some 
//kind of auth data, I've redefined the headers.common object to get 
//rid of the Authorization property 
$http.defaults.headers.common = {Accept: "application/json, text/plain, */*"}; 

Answer 3

I ha riscontrato questo problema insieme a Spring Boot Security (HTTP basic), e dal momento che Angular 1.3 è necessario impostare $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; affinché il popup non venga visualizzato.