2017-09-23 1 views
1

Ich implementiere JWT-Token zur Authentifizierung.Wie behandelt man JWT-Token auf der Client-Site in Node.js-Anwendung?

Ich verwende kein Client-Site-Framework wie Angular oder React. Es ist nur EJS.

Schritt 1. Ich habe eine API, die auf der erfolgreichen Anmeldung entwickelt, um das Token zurückgibt, wie unten (I zum Testen API bin mit Postman) auf dem Bild gezeigt:

API response with JSON

Schritt 2. Ich bin dann Zugreifen auf die eingeschränkte Route und Übergabe der Authorization-Header mit Token-Wert, durch manuelle Eingabe in den Postman und es funktioniert gut.

Meine Frage ist, wo und wie speichere ich das zurückgegebene Token aus dem Schritt 1 auf dem Client, so dass es in der Kopfzeile auf Schritt gesendet wird, 2.

Ich bin Neuling auf dem Web-Entwicklung und im Anschluss an dem Tutorials, aber alle Tutorials, die ich über die Implementierung des JWT-Tokens gefunden habe, sind für Angular oder React geschrieben, wenn es um die Client-Site geht.

Jede Hilfe würde sehr geschätzt werden.

Vielen Dank!

+0

Hallo Roman. Können Sie Ihre Frage mit dem clientseitigen Code aktualisieren, mit dem Sie umgehen: 1.Benutzeranmeldung 2. Benutzerauthentifizierung (für Seiten, für die eine Authentifizierung für den Zugriff auf Inhalte erforderlich ist). Im Allgemeinen sollten Sie jedoch 'localStorage' verwenden, das über eine' setItem'-Methode zum lokalen Speichern von Daten (in diesem Fall das Token) und eine 'getItem'-Methode zum Abrufen dieser Daten verfügt. Dann geht es nur darum, das Token richtig zu benutzen. – Jaxx

Antwort

1

Erste müssen Sie das Token mit JWT erstellen:

const token=jwt.sign({ 
       userId: user._id 
       },config.secret, {expiresIn: '24h'}); 
       res.json({success:true,message:'Success', token:token, user: {username:user.username}}); 

Dann in Ihrem Front YouCan es in den Dieser localStorage

sparen einen eindeutigen Schlüssel generieren, die Sie implementieren können in Ihrem Header

Danach in Ihren Routen, wenn Sie überprüfen möchten, ob es ein JWT im Header machen gerade:

router.use((req,res,next)=>{ 
     const token=req.headers['authorization']; 
     if(!token){ 
      res.json({success:false, message:"No token provided"}); 
     } 
     else{ 
      jwt.verify(token, config.secret, (err,decoded)=>{ 
       if(err){ 
        res.json({success:false,message:"Token invalid: " + err}); 
       } 
       else{ 
        req.decoded=decoded; 
        next(); 
       } 
      }); 
     } 
    }); 

Dies ist eine Middleware, die

prüft, ob

Hinweis ein JWT Schlüssel in „Autorisierung“ Header gibt es, dass jede Route nach diesem kommen werden diese Middleware ausführen .

Here Hier finden Sie alle Details über JSON Web Tokens

EDIT

Hier erfahren Sie, wie Sie mit einem AJAX-Request tun könnte:

$("submit").click(function(){ 

    $.ajax({ 
     url : 'api/login,', 
     type : 'POST', 
     data : {login: $('#login').val(),password:$('#password').val()} 
     dataType : 'JSON', 
     success : function(data, statut){ 
      localStorage.setItem('token',data.token) // assuming you send a json token 
     }, 

     error : function(resultat, statut, erreur){ 
     // whatever code you want 
     }, 

     complete : function(resultat, statut){ 

     } 

    }); 

}); 
+0

Danke für Ihre Antwort Azoulay. Wie ich in meinem Post erwähnt habe, habe ich bereits den Controller, die Routen usw. implementiert, die die Authentifizierungslogik handhaben. Die Aufgabe besteht darin, das Token auf der Client-Site zu speichern und bereitzustellen. –

+0

Um das JWT-Token auf Ihrer Client-Seite zu implementieren, müssen Sie den lokalen Speicher wie erwähnt verwenden. Sie greifen die Daten, die von der Rückseite kommen, und ordnen sie dann dem lokalen Speicher zu, indem Sie localStorage.setItem ('token', data) verwenden; Sie sollten sich den Link ansehen, den ich über den lokalen Speicher gepostet habe. Wenn Ihnen diese Antwort weitergeholfen hat, können Sie das bitte auffrischen und als gelöst festlegen? danke –

+0

Hallo Azoulay, leider beantwortet es meine Frage nicht ganz. Ich kenne die Theorie, aber ich weiß nicht genau, wie ich sie umsetzen soll. Ich habe eine http: // localhost: 3000/api/Login-Seite, wenn ich mein Passwort und Benutzernamen eingeben und ein Formular absende, gibt der Controller die Daten an den API-Endpunkt weiter, der den json {"token": "blabla"} zurückgibt. . Wie kann ich diese Daten abrufen, um sie dann im lokalen Speicher zu speichern? –

0

Haben Sie ein Objekt, in dem Sie das Token speichern, wenn Sie das Token behalten möchten, nachdem der Benutzer gegangen ist, damit er verbunden bleibt, solange das Token gültig ist, können Sie es im localStorage speichern.

Und wenn Sie AJAX-Anforderungen auf der Clientseite ausführen, rufen Sie das Token von Ihrem Objekt von localStorage ab und legen Sie das Token im Autorisierungsheader fest.

Verwandte Themen