Avec la popularité des modèles de développement de séparation front-end et back-end, Vue, en tant que framework JavaScript léger, est largement utilisé dans le développement front-end. Vue peut communiquer avec le serveur pour obtenir des données et effectuer une authentification. Cet article explique comment mettre en œuvre le processus d'authentification de connexion et donne des exemples de code correspondants.
1. Envoi et réception de demandes de connexion frontales
Dans le projet Vue, la connexion est une partie importante de l'interaction entre l'utilisateur et le serveur. Une fois que l'utilisateur a entré le nom d'utilisateur et le mot de passe, une demande de connexion est envoyée en appelant l'interface principale, et le serveur vérifie les informations de l'utilisateur et renvoie le résultat correspondant.
Exemple de code :
créez d'abord un nouveau composant de connexion Login.vue dans le projet Vue :
<template>
<div class="login-form">
<input type="text" v-model="username" placeholder="请输入用户名" />
<input type="password" v-model="password" placeholder="请输入密码" />
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// 发送登录请求
axios.post('/api/login', {
username: this.username,
password: this.password,
})
.then((response) => {
console.log(response.data);
// 处理登录成功的逻辑
})
.catch((error) => {
console.log(error.message);
// 处理登录失败的逻辑
});
},
},
};
</script>
Dans le code ci-dessus, nous avons envoyé une requête POST à /api/loginl'interface via la bibliothèque axios et transmis les paramètres de nom d'utilisateur et de mot de passe. Après avoir reçu la réponse du serveur, nous pouvons effectuer un traitement supplémentaire en fonction du résultat correspondant.
2. Vérification de la connexion côté serveur
Ensuite, nous devons vérifier la demande de connexion côté serveur. Le serveur peut utiliser n'importe quel langage back-end pour implémenter la logique de vérification de connexion. Ici, nous prenons Node.js comme exemple pour illustration.
Exemple de code :
créez un fichier router.js pour gérer la logique de routage :
const express = require('express');
const router = express.Router();
// 处理登录请求
router.post('/api/login', (req, res) => {
const { username, password } = req.body;
// 在这里进行登录验证的逻辑
if (username === 'admin' && password === '123456') {
res.json({ success: true, message: '登录成功' });
} else {
res.status(401).json({ success: false, message: '用户名或密码错误' });
}
});
module.exports = router;
Dans le code ci-dessus, nous avons créé un routeur d'objet de routage via la bibliothèque express et défini /api/loginl'interface pour recevoir les requêtes POST. Dans cette interface, nous pouvons effectuer une vérification de connexion basée sur le nom d'utilisateur et le mot de passe. Si la validation est réussie, nous renvoyons une réponse de succès, sinon nous renvoyons une réponse d'erreur avec le message d'erreur approprié.
3. Le traitement après la connexion frontale est réussi
Dans le frontal, nous pouvons stocker le statut de connexion via la gestion de l'état (comme Vuex), afin que d'autres composants puissent effectuer des opérations d'authentification. Une fois la connexion réussie, nous pouvons enregistrer le statut de connexion de l'utilisateur dans Vuex et accéder à la page correspondante.
Exemple de code :
instanciez d'abord Vuex dans main.js (ou d'autres fichiers d'entrée) :
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
isLoggedIn: false, // 默认未登录
},
mutations: {
login(state) {
state.isLoggedIn = true;
},
logout(state) {
state.isLoggedIn = false;
},
},
});
Vue.config.productionTip = false;
new Vue({
store,
render: (h) => h(App),
}).$mount('#app');Dans le composant Login.vue, une fois la connexion réussie, nous appelons la méthode de connexion du magasin pour définir le statut de connexion sur true et effectuer un saut de page.
<script>
import { mapMutations } from 'vuex';
export default {
// ...
methods: {
...mapMutations(['login']), // 映射login方法为组件方法
login() {
axios.post('/api/login', {
username: this.username,
password: this.password,
})
.then((response) => {
console.log(response.data);
if (response.data.success) {
this.login(); // 登录成功后调用store的login方法
// 处理登录成功的逻辑
} else {
// 处理登录失败的逻辑
}
})
.catch((error) => {
console.log(error.message);
// 处理登录失败的逻辑
});
},
},
};
</script>Dans d'autres composants qui nécessitent une authentification, nous pouvons déterminer si nous nous sommes connectés en accédant à l'état du magasin, afin d'effectuer les opérations correspondantes, par exemple :
computed: {
isLoggedIn() {
return this.$store.state.isLoggedIn;
},
},
Grâce aux étapes ci-dessus, nous avons réalisé le processus d'authentification de connexion entre Vue et le serveur. Une fois que l'utilisateur a entré le nom d'utilisateur et le mot de passe, le frontal envoie une demande de connexion au serveur, et le serveur renvoie le résultat correspondant après vérification. Le frontal traite la logique de connexion réussie ou échouée en fonction des résultats et effectue des opérations d'authentification via la gestion d'état.
Cet article n'est qu'une brève discussion sur l'authentification de connexion entre Vue et la communication côté serveur.Dans le développement réel, d'autres problèmes tels que la vérification, le cryptage, l'authentification et les droits d'utilisateur peuvent être impliqués. Nous espérons que l'introduction de cet article pourra aider les lecteurs à mieux comprendre les connaissances pertinentes de Vue et de la communication côté serveur, et fournir des références pour le développement de la séparation front-end et back-end.