Login-Flow mit Angulajs und JWT

Question

In meiner Webapp, wenn die Hauptseite von einem nicht angemeldeten Benutzer angefordert wird, zeige ich eine Login-Seite (mit nur einem Login-Formular). Dann gibt der Benutzer seine Benutzer-ID und Pwd ein, und ein angularJS-Controller gibt eine HTTP-POST-Anforderung an/connection aus, die bei akzeptierten Anmeldeinformationen ein JWT-Authentifizierungs-Token zurückgibt.

Dann möchte ich, dass der angularJS-Controller ein GET on/das Token in der Kopfzeile ausgibt, so dass die nächste geladene Seite die Haupt-Webapp-Seite ist, mit der der verbundene Benutzer anfangen kann zu spielen.

Wie kann ich das mit AngularJS erreichen? Sollte ich $ document.location.href verwenden? Wenn ja, wie kann das Token in den HTTP-Header gesetzt werden?

Dank

Answer 1

Sie können es in 2 Möglichkeiten:

1-Use Benutzerdefinierte Kopfzeile für alle initiierten Requests (wird nicht Angelegenheit, Post, etc ..) und hier in unseren Freunden gepostet viele verschiedene Ansätze.

AngularJS $http custom header for all requests

2-Aufschalten der Kopfzeile für den Antrag wie folgt aus:

$http.get(/*The Call URL*/'http://myawesomeurl/jsondata',/*Configuration Object*/ 
{/*Overriding the header of the request*/ 
    headers: { 
     'Content-Type': 'application/json',//request content type 
     'Authorization': 'token d2VudHdvcnRobWFuOkNoYW5nZV9tZQ=='//Token parameter 
     //,'myAwesomeHeaderParam':'the header is all yours, add or remove anything' 
    } 
}) 
.success(function (data, status, headers, config) { 
    console.log(data);//Received data 
}) 
.error(function (data, status, headers, config) { 
    console.log('Error Status:'+status); 
    console.log(data);//Any Server Response values in the case of error 
}); 

//Another Way for initiating the request just for your info 
/* var reqInfo = { 
     method: 'GET',//POST, PUT 
     url: 'http://myawesomeurl/jsondata', 
     headers: { 
      'Content-Type': 'application/json',//request content type (can be not used) 
      'Authorization': 'token d2VudHdvcnRobWFuOkNoYW5nZV9tZQ=='//Token parameter 
     } 
//,data:{'myAwesomeParameter':'in case of post or put, etc..'} //Request body 
    }; 
$http(reqInfo).success(....*/ 

Und Sie können mehr über die Configuration Object here