Comment utiliser Vue pour implémenter les paramètres de sortie de saut de page de connexion

Avec le développement rapide et la vulgarisation de la technologie front-end, de plus en plus d'entreprises commencent à appliquer la technologie Vue pour créer leurs propres sites Web. Dans l'application pour les sites Web d'entreprise, la connexion est un lien qui ne peut être ignoré et Vue possède sa propre méthode unique pour réaliser la fonction de connexion. Cet article explique comment utiliser Vue pour implémenter les paramètres de sortie du saut de page de connexion, puis implémenter la vérification de la connexion de l'utilisateur.

1. Préparation

Avant de commencer à implémenter les paramètres de sortie de saut, nous devons effectuer les étapes suivantes :

(1) Installer Vue-CLI

Vue-CLI est l'outil d'échafaudage officiel de Vue qui simplifie les opérations de configuration, notamment en termes de création de projet, de développement et de construction de packaging, il peut rapidement vous initier au développement de Vue.

Méthode d'installation :

npm install -g @vue/cli

(2) Créer un projet Vue

Nous pouvons utiliser la ligne de commande pour créer un projet Vue dans le terminal, entrer dans le répertoire racine du projet et utiliser le ligne de commande pour exécuter les instructions suivantes :

vue create my-project

2. Implémenter la logique

1) Page de connexion

Dans la page de connexion, nous devons entrer le nom d'utilisateur et le mot de passe pour la vérification et l'affichage du saut.

Une fois le projet Vue créé, nous devons importer le plug-in Vue vue-router pour implémenter les sauts de page.

Tout d'abord, nous entrons dans le répertoire src du projet, créons un nouveau fichier login.vue et effectuons l'opération de connexion sur la page.

<script><br>import { mapActions } from "vuex";<br>export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data() {     return {         username: '',         password: ''     } }, methods: {     ...mapActions(['login']),     // 登录     async submit() {         await this.login({ username: this.username, password: this.password });     } }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>}<br></script>

2) Établir une interface serveur Opération backend du site Web

Nous devons fournir une interface API RESTful côté serveur pour traiter les demandes de connexion et renvoyer les données de résultat correspondantes. Dans le projet Vue, nous pouvons utiliser la bibliothèque Axios pour les opérations d'interface de requête.

Dans le répertoire racine du projet Vue, utilisez la ligne de commande pour exécuter :

npm install axios

Dans le répertoire racine du projet Vue, créez un nouveau fichier service.js pour encapsuler le processus de requête API basé sur Axios et traitez-le comme un plugin distinct. Les plugins Vue sont fournis pour une utilisation dans toute l'application.

//Introduire la bibliothèque axios
importer axios depuis "axios";
// Créer une instance axios
const service = axios.create({

baseURL: "http://192.168.0.102",
timeout: 10000

});
export default ({ Vue }) =>

Vue.use(service, {Vue})

export const LOGIN_SUCCESS = "LOGIN_SUCCESS"; // Connexion réussie
export const LOGIN_FAIL = "LOGIN_FAIL"; // Échec de la connexion

export par défaut {

Vue.prototype.$axios = service;

importer Vue depuis 'vue'
importer Vuex depuis 'vuex'
importer des actions depuis './actions.js'
importer * en tant que types depuis './types.js'

const store = new Vuex.Store({

login: ({ commit }, param) => new Promise((resolve, reject) => {
    const { username, password } = param;
    this.$axios.post('/login', { username, password }).then(res => {
        const data = res.data;
        if (data.code === 200) {
            commit(types.LOGIN_SUCCESS, { data });
            resolve();
        }
        else {
            commit(types.LOGIN_FAIL, { message: data.message });
            reject(data.message);
        }
    })
})

importer l'application depuis './App.vue'
importer le routeur depuis './router'
importer le magasin depuis './store/store.js'

new Vue({

state: {
    info: {
        isLogged: false, // 是否登录
        name: "", // 登录用户名
    }
},
mutations: {
    [types.LOGIN_SUCCESS](state, { data }) {
        state.info.isLogged = true;
        state.info.name = data.name;
    },
    [types.LOGIN_FAIL](state, { message }) {
        state.info.isLogged = false;
        state.info.name = "";
        console.log(message)
    }
},
actions

importer le routeur depuis 'vue-router'
importer la maison depuis './views/Home.vue'
importer la connexion depuis './views/Login.vue'
Vue.use (routeur)
const router = new Router({

router,
store, // 注册Vuex
render: h => h(App)

router.beforeEach((to, from, next) => { // Effectuer une vérification de connexion à la page lorsque le routage est commuté

mode: 'history',
routes: [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: { requiresAuth: true } // requireAuth用于表示页面是否需要登录才能访问，本例中仅仅对home页面设置了登录验证
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
]

在登录成功的方法中：

import router from '../router'
import { stringify } from 'querystring'

commit(types.LOGIN_SUCCESS, { data })
const queryString = stringify({ name: data.name }) // 使用 queryString 库，将参数转化为字符串
router.push({ name: "home", query: { authInfo: window.btoa(queryString) }}) // 使用 router 进行跳转，这里使用了 Base64 编码策略，有兴趣的可以了解一下

在Home.vue组件中，我们通过created钩子，获取路由中的输入参数并将其输出。

export default {

name: 'home',
created() {
    if (this.$route.query.authInfo !== undefined) { // 如果存在 authInfo
        const res = atob(this.$route.query.authInfo) // Base64解码操作
        this.formData = qs.parse(res) // 请求参数解码操作
        console.log(this.formData) // 输出参数信息
    }
},
data() {
    return {
        formData: {}
    }
}

}

至此，我们已经成功使用Vue实现登录页跳转输出参数的功能。

结语

本文介绍了如何利用 Vue 实现跳转输出参数，通过 Vue-CLI、Axios、Vuex 和 Vue-Router 等技术栈，实现了基于Vue的网站登录验证功能。当然了，本文的实现是源于作者的参考和思考，如果您也有更好的实现方式，请跟我们一起分享并探讨。

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!