web-dev-qa-db-fra.com

Angular 2: en-tête Obtenir l'autorisation

dans mon application (Angular 2/Ionic 2), j'ai implémenté mon propre login/authentification. Cela fonctionne comme suit: lors de la connexion, le nom d’utilisateur et le mot de passe sont en cours de validation par le backend PHP. Un jeton est généré, qui est renvoyé à l’intérieur puis dans l’en-tête (Autorisation). La réponse de backend ressemble à ceci:

HTTP/1.1 200 OK
Host: localhost:8080
Connection: close
X-Powered-By: PHP/5.6.28
Set-Cookie: PHPSESSID=jagagi2le1b8i7r90esr4vmeo6; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Type: application/json
 Authorization: d7b24a1643a61706975213306446aa4e4157d167eaad9aac989067a329c492d3
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Origin, Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Content-Length: 301

Il y a clairement un en-tête d'autorisation avec un jeton. CORS semble également être configuré correctement, car je vois l'autorisation dans l'en-tête Allow-Headers.

Mais lorsque j'essaie d'obtenir l'en-tête dans Angular 2, il renvoie toujours null:

private extractDataAndSetAuthHeader(res: Response) {

    // Set auth header if available.
    // If not available - user is not logged in. Then 
    // we also have to remove the token from localStorage
    if(res.headers.has("Authorization"))
    {
        let token = res.headers.get("Authorization");

        this.setToken(token);
    }
    else
    {
        // If no token is sent, remove it
        this.removeToken();
    }

    let body = res.json();
    return body.data || { };
}

La première ligne de la méthode renvoie false. De plus, lorsque je vérifie l'objet en-tête dans ma réponse, il ne me montre que les éléments suivants (outils de développement de Chrome):

[[Entries]]:
Array[4]
0:{"pragma" => Array[1]}
1:{"content-type" => Array[1]}
2:{"cache-control" => Array[1]}
3:{"expires" => Array[1]}

Il n'y a pas d'en-tête d'autorisation présent dans cet objet.

Est-ce que quelqu'un peut m'aider s'il vous plait?

Merci d'avance :)

angularauthenticationionic2
7
dave0688

Je voulais juste poster la réponse, car cela pourrait aider les autres:. 

Access-Control-Expose-Headers: Authorization

Ensuite, frontend peut également lire l'en-tête d'autorisation.

18
dave0688

Cette réponse m'a aidé: link

Il montre comment l'ajouter dans le backend et comment l'utiliser dans le frontend

Backend Java:

public void methodJava(HttpServletResponse response){
...
response.addHeader("access-control-expose-headers", "Authorization");
}

Et accédez à l'en-tête angulaire comme ceci:

return this.http
    .get(<your url here for your backend>)
    .map(res => console.log("cookie: " + res.headers.get("Authorization") )
}
4
EssaidiM

Ce n'est pas lié à Angular. Le problème est que CORS limite les en-têtes par défaut et vous ne voyez pas l'en-tête "Autorisation" lorsque vous appelez des demandes CORS. Donc, ajustez le serveur pour le laisser envoyer l'en-tête d'autorisation

Les en-têtes d'autorisation de contrôle d'accès doivent être fournis en réponse à la demande OPTIONS (avant le vol).

Les en-têtes de contrôle d'accès-contrôle doivent être fournis en réponse à la demande POST/GET.

En-têtes de contrôle d'accès-contrôle: autorisation

0
Durgesh Pal