Eine vollständige Anleitung zur Implementierung der Front-End- und Back-End-Trennung in Vue (axios, jwt)

Eine vollständige Anleitung zur Implementierung der Front-End- und Back-End-Trennung in Vue (axios, jwt)

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie ist die Front-End- und Back-End-Trennung zu einem Trend in der Webentwicklung geworden. Als beliebtes Front-End-Framework passt Vue perfekt zur Back-End-Trennungsentwicklungsmethode. In diesem Artikel wird erläutert, wie Vue mit Axios und JWT verwendet wird, um eine separate Front-End- und Back-End-Entwicklung zu erreichen, und es werden Codebeispiele und Vorsichtsmaßnahmen bereitgestellt.

1. Was ist Axios?

axios ist ein Promise-basierter HTTP-Client für Browser und node.js. Er bietet die folgenden Vorteile:

1. Unterstützt Promise API
2. Kann sowohl vom Client als auch vom Server verwendet werden
3. Unterstützt das Abfangen von Anfragen und Antworten
4. Support Stornierungsanfragen

2. Was ist jwt?

jwt (JSON Web Token) ist ein einfacher Authentifizierungs- und Autorisierungsstandard. Es ermöglicht eine sichere Möglichkeit zur Authentifizierung von Informationen zwischen verschiedenen Anwendungen. JWT besteht aus drei Teilen: Header, Payload und Signatur. Der Header enthält Informationen wie den Token-Typ und den Verschlüsselungsalgorithmus. Die Nutzlast enthält die zu übertragenden Informationen und kann angepasst werden. Die Signatur wird verwendet, um zu überprüfen, ob das Token manipuliert wurde.

3. Wie verwende ich Axios in Vue?

Verwenden Sie axios in der Vue-Komponente, um Daten anzufordern:

1. Axios installieren: Sie können npm verwenden, um es zu installieren:

npm install axios --save

2. Axios importieren: Wenn Sie Axios in der Komponente verwenden müssen, müssen Sie zuerst Axios importieren. Der Beispielcode lautet wie folgt:

Axios aus „Axios“ importieren

3. Anfrage senden: So verwenden Sie Axios zum Senden Eine HTTP-Anfrage lautet wie folgt:

axios.get('url')
.then (response => {
console.log(response.data)
})
.catch(error => {
console .log(error)
})

wobei url die angeforderte URL-Adresse darstellt; then( )-Methode stellt die Rückruffunktion dar, nachdem die Anforderung erfolgreich war, und die übergebene Parameterantwort sind die vom Server zurückgegebenen Daten; Die Methode stellt die Rückruffunktion dar, nachdem die Anforderung fehlgeschlagen ist, und der übergebene Parameter error ist die Fehlermeldung.

4. Wie verwende ich JWT zur Authentifizierung?

Wenn Sie JWT zur Authentifizierung verwenden, müssen Sie zunächst JWT auf der Serverseite generieren und überprüfen.

1. JWT generieren

Auf der Serverseite können Sie die jsonwebtoken-Bibliothek verwenden, um JWT zu generieren. Der Beispielcode lautet wie folgt:

const jwt = require('jsonwebtoken')
const token = jwt.sign({ user: 'username' }, 'secretkey', { ExpiresIn: '1h' })

Unter diesen kann das Benutzerfeld Benutzerinformationen speichern; das ExpiresIn-Feld stellt die Ablaufzeit dar des Tokens, der je nach Bedarf angepasst werden kann.

2. JWT überprüfen

Auf der Clientseite müssen Sie das JWT vom Server abrufen und es dann überprüfen. Verwenden Sie die jsonwebtoken-Bibliothek, um jwt zu überprüfen. Der Beispielcode lautet wie folgt:

const jwt = require('jsonwebtoken')
const token = 'xxxxx' // Das vom Server erhaltene Token
try {
const decoded = jwt. verify( token, 'secretkey');
console.log(decoded) // { user: 'username', iat: 1622668826, exp: 1622672426 }
} Catch (err) {
console.log(err)
}

wobei das Token das vom Server generierte Token ist; die Methode „Verify()“ wird verwendet, um die Gültigkeit des Tokens zu überprüfen. Das zurückgegebene dekodierte Objekt enthält Benutzerinformationen, Ausstellungszeit (iat) und Ablaufzeit (exp).

5. Wie verwende ich JWT zur Authentifizierung in Vue?

Verwenden Sie JWT in Vue zur Authentifizierung. Die Schritte lauten wie folgt:

1. Token abrufen

Nach erfolgreicher Anmeldung muss der Server das JWT-Token an den Client senden, und der Client kann es im lokalen Speicher oder im Cookie speichern. Der Beispielcode lautet wie folgt:

axios.post('url', { Benutzer: 'Benutzername', Passwort: 'Passwort' })
.then(response => {
// Anmeldung erfolgreich, Token in localStorage speichern
localStorage.setItem('token', Response.data.token)
})
.catch(error => {
console.log(error)
})

2. Senden Sie die Anfrage und tragen Sie das Token

Bei Bedarf muss der Client beim Anfordern einer Schnittstelle, die eine Authentifizierung erfordert, das Token im Anforderungsheader enthalten. Der Beispielcode lautet wie folgt:

axios.get('url', {
headers: { 'Authorization': 'Bearer ' + localStorage.getItem(' token') }
})
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error )
})

wobei das Autorisierungsfeld das Schlüsselwort im Anforderungsheader ist, Bearer den Richtliniennamen darstellt, der die Abkürzung für Bearer Authentication Scheme ist, und die folgende Zeichenfolge das in localStorage gespeicherte JWT-Token ist.

Hinweise:

1. Wenn Sie JWT zur Authentifizierung verwenden, müssen Sie auf die Vertraulichkeit des Schlüssels achten, da der JWT-Token sonst von einem Angreifer manipuliert oder gefälscht werden kann.
2. Bei der Verwendung von Axios in Vue müssen Sie auf domänenübergreifende Probleme achten und den Antwortheader Access-Control-Allow-Origin auf der Serverseite festlegen oder einen Proxy verwenden, um das Problem zu lösen.
3. In der Entwicklungsumgebung können Sie webpack-dev-server verwenden, um domänenübergreifende Probleme zu lösen. Der Beispielcode lautet wie folgt:

devServer: {
Proxy: {

'/api': {
  target: 'http://localhost:3000',
  pathRewrite: { '^/api': '' }
}

}
}

wobei Ziel darstellt die Ziel-URL-Adresse und pathRewrite Gibt die Regeln zum Umschreiben des Pfads an.

Dieser Artikel enthält detaillierte Schritte und Vorsichtsmaßnahmen für die Verwendung von Vue mit Axios und JWT, um eine Front-End- und Back-End-Entwicklung zu erreichen. Ich hoffe, dass er für Webentwickler hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonEine vollständige Anleitung zur Implementierung der Front-End- und Back-End-Trennung in Vue (axios, jwt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!