Maison > Article > interface Web > 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 :
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 :
npm install axios --save
importer axios depuis 'axios'
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.
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.
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 :
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)
})
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 :
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!