Un guide complet pour implémenter la séparation front-end et back-end dans Vue (axios, jwt)

Un guide complet pour implémenter la séparation front-end et back-end dans Vue (axios, jwt)

Avec le développement continu de la technologie front-end, la séparation front-end et back-end est devenue une tendance dans le développement Web. En tant que framework front-end populaire, Vue correspond parfaitement à la méthode de développement de séparation back-end. Cet article expliquera comment utiliser Vue avec axios et jwt pour réaliser un développement front-end et back-end séparé, et fournira des exemples de code et des précautions.

1. Qu'est-ce qu'axios ?

axios est un client HTTP basé sur Promise pour les navigateurs et node.js. Il bénéficie des avantages suivants :

1. Prend en charge l'API Promise
2. Peut être utilisé à la fois par le client et le serveur
3. Prend en charge l'interception des requêtes et des réponses
4. Support. demandes d'annulation

2. Qu'est-ce que jwt ?

jwt (JSON Web Token) est une norme légère d'authentification et d'autorisation. Il permet un moyen sécurisé d’authentifier les informations entre différentes applications. JWT se compose de trois parties : en-tête, charge utile et signature. L'en-tête contient des informations telles que le type de jeton et l'algorithme de cryptage ; la charge utile contient les informations qui doivent être transmises et peut être personnalisée ; la signature est utilisée pour vérifier si le jeton a été falsifié ;

3. Comment utiliser axios dans Vue ?

Utilisez axios dans le composant Vue pour demander des données. Les étapes sont les suivantes :

1. Installez axios : Vous pouvez utiliser npm pour l'installer. La commande est la suivante :

npm install axios --save

2. . Importer axios : lorsque vous devez utiliser axios Dans le composant, vous devez d'abord importer axios. L'exemple de code est le suivant :

importer axios depuis 'axios'

3. Envoyer une demande : La façon d'utiliser axios pour envoyer une requête HTTP est la suivante :

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

où, url représente l'adresse URL demandée ; then( ) représente la fonction de rappel une fois la requête réussie, et la réponse du paramètre transmise correspond aux données renvoyées par le serveur ; () représente la fonction de rappel après l'échec de la demande, et l'erreur de paramètre transmise est le message d'erreur.

4. Comment utiliser jwt pour l'authentification ?

Lorsque vous utilisez jwt pour l'authentification, vous devez d'abord générer et vérifier jwt côté serveur.

1. Générer jwt

Côté serveur, vous pouvez utiliser la bibliothèque jsonwebtoken pour générer jwt. L'exemple de code est le suivant :

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

Parmi eux, le champ user peut stocker des informations sur l'utilisateur ; secretkey est la clé, utilisée pour crypter le jeton, le champ expiresIn représente l'heure d'expiration ; du jeton, qui peut être ajusté selon les besoins.

2. Verify jwt

Côté client, vous devez obtenir le jwt du serveur, puis le vérifier. Utilisez la bibliothèque jsonwebtoken pour vérifier jwt. L'exemple de code est le suivant :

const jwt = require('jsonwebtoken')
const token = 'xxxxx' // Le jeton obtenu du serveur
try {
const decoded = jwt. verify( token, 'secretkey');
console.log(decoded) // { user: 'username', iat: 1622668826, exp: 1622672426 }
} catch (err) {
console.log(err)
}

où , le jeton est le jeton généré par le serveur ; la méthode verify() est utilisée pour vérifier la validité du jeton. L'objet décodé renvoyé contient les informations utilisateur, l'heure d'émission (iat) et l'heure d'expiration (exp).

5. Comment utiliser jwt pour l'authentification dans Vue ?

Utilisez jwt dans Vue pour l'authentification, les étapes sont les suivantes :

1. Obtenir un jeton

Après une connexion réussie, le serveur doit envoyer le jeton jwt au client, et le client peut le stocker dans localStorage ou cookie, l'exemple de code est le suivant :

axios.post('url', { user: 'username', password: 'password' })
.then(response => {
// Connexion réussie, enregistrer le jeton dans localStorage
localStorage.setItem('token', réponse.data.token)
})
.catch(error => {
console.log(error)
})

2. Envoyez la demande et transportez le jeton

si nécessaire Lorsqu'il demande une interface qui nécessite une authentification, le client doit porter le jeton dans l'en-tête de la demande. L'exemple de code est le suivant :

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

où, le champ Autorisation est le mot-clé dans l'en-tête de la demande, Bearer représente le nom de la politique, qui est l'abréviation de Bearer Authentication Scheme, et la chaîne suivante est le jeton jwt stocké dans localStorage.

Remarques :

1. Lorsque vous utilisez jwt pour l'authentification, vous devez faire attention à la confidentialité de la clé, sinon le jeton jwt pourrait être falsifié ou falsifié par un attaquant.
2. Lorsque vous utilisez axios dans Vue, vous devez faire attention aux problèmes inter-domaines et définir l'en-tête de réponse Access-Control-Allow-Origin côté serveur ou utiliser un proxy pour le résoudre.
3. Dans l'environnement de développement, vous pouvez utiliser webpack-dev-server pour résoudre des problèmes inter-domaines. L'exemple de code est le suivant :

devServer : {
proxy : {

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

}
}

où la cible représente. l'adresse URL cible et pathRewrite Indique les règles de réécriture du chemin.

Cet article fournit des étapes détaillées et des précautions pour utiliser Vue avec axios et jwt pour réaliser un développement de séparation front-end et back-end. J'espère qu'il sera utile aux développeurs Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!