Comment créer une fonction de fenêtre contextuelle dans vue pour déterminer la connexion de l'utilisateur

Dans les applications Web modernes, l'authentification et l'autorisation des utilisateurs sont très importantes. Pour ce faire, de nombreuses applications doivent déterminer si l'utilisateur est connecté et le forcer à se connecter s'il ne l'est pas. Dans Vue.js, nous pouvons facilement y parvenir en utilisant ses méthodes de cycle de vie et ses gardes de navigation d'itinéraire. Cet article explique comment utiliser Vue.js pour créer une fenêtre contextuelle afin de déterminer la connexion de l'utilisateur.

Tout d'abord, nous devons définir un composant pop-up général qui affichera un message et permettra à l'utilisateur de fermer la fenêtre pop-up. Nous pouvons créer ce composant en utilisant la fonctionnalité de composant de Vue.js. Voici un exemple simple :

<template>
  <div class="modal" v-show="show">
    <div class="modal-content">
      <p>{{ message }}</p>
      <button v-on:click="close">Close</button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        default: 'Please log in to continue'
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      close: function () {
        this.$emit('close');
      }
    }
  }
</script>

<style>
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    text-align: center;
  }
</style>

Nous disposons désormais d'un composant contextuel universel qui peut être utilisé à n'importe quelle fin. Ensuite, nous devons vérifier l'état de connexion de l'utilisateur lorsqu'il tente d'accéder à une page nécessitant une connexion. Nous pouvons y parvenir en utilisant les gardes de navigation de Vue.js. Dans Vue.js, un garde-route est un ensemble de méthodes que nous pouvons exécuter avant, après ou pendant la navigation vers un itinéraire. Dans notre cas, nous utiliserons le garde de navigation "beforeEach", qui sera exécuté à chaque fois que l'utilisateur visite une nouvelle page.

Dans notre application Vue.js, nous pouvons définir des gardes de route dans le fichier router.js. Voici un exemple :

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import AuthModal from './components/AuthModal.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !isLoggedIn()) {
    const authModal = new Vue(AuthModal).$mount();
    authModal.$on('close', () => {
      authModal.$destroy();
    });
    Vue.nextTick(() => {
      document.body.appendChild(authModal.$el);
    })
  } else {
    next();
  }
})

function isLoggedIn() {
  // Check whether the user is logged in or not
}

export default router

Dans cet exemple, nous définissons deux routes, l'une est la route du composant Home et l'autre est la route du composant Login. Nous avons défini une garde "beforeEach" pour toute la navigation de l'application qui vérifie l'état de connexion de l'utilisateur avant de naviguer vers une nouvelle page. Si l'utilisateur n'est pas connecté et que la page n'est pas une page de connexion, nous afficherons un composant contextuel sur l'écran pour inviter l'utilisateur à se connecter. Nous utilisons la fonction d'instanciation de Vue.js pour créer ce composant pop-up et le détruire lorsque l'utilisateur choisit de fermer la fenêtre pop-up. Enfin, nous vérifions si l'utilisateur est connecté et si c'est le cas, lui permettons de poursuivre la navigation.

Enfin, nous devons nous assurer qu'une fois que l'utilisateur s'est connecté avec succès, nous enregistrons son statut. Nous pouvons utiliser Vuex, la bibliothèque de gestion d'état de Vue.js, pour gérer l'état dans l'application. Voici un exemple :

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;
    }
  },
  actions: {
    login({ commit }) {
      // Log the user in
      commit('login');
    },
    logout({ commit }) {
      // Log the user out
      commit('logout');
    }
  }
})

export default store

Dans cet exemple, nous définissons un état (isLoggedIn), une mutation "login" pour marquer l'utilisateur comme connecté et une mutation "logout" pour déconnecter l'utilisateur. Nous définissons également des actions (connexion) et (déconnexion) pour gérer la logique d'authentification et de mise à jour du statut en arrière-plan.

Nous avons maintenant implémenté une fenêtre contextuelle de connexion utilisateur dans l'application Vue.js. Nous utilisons les méthodes de cycle de vie natives de Vue.js et les gardes de navigation d'itinéraire pour permettre aux utilisateurs de s'authentifier et d'autoriser facilement via différents composants Vue et états d'application.

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!