So erstellen Sie eine Popup-Fensterfunktion in Vue, um die Benutzeranmeldung zu ermitteln

In modernen Webanwendungen sind Benutzerauthentifizierung und -autorisierung sehr wichtig. Dazu müssen viele Anwendungen feststellen, ob der Benutzer angemeldet ist, und ihn zur Anmeldung zwingen, wenn dies nicht der Fall ist. In Vue.js können wir dies mithilfe der Lebenszyklusmethoden und Routennavigationswächter leicht erreichen. In diesem Artikel wird erläutert, wie Sie mit Vue.js ein Popup-Fenster erstellen, um die Benutzeranmeldung zu ermitteln.

Zuerst müssen wir eine allgemeine Popup-Komponente definieren, die eine Nachricht anzeigt und es dem Benutzer ermöglicht, das Popup-Fenster zu schließen. Wir können diese Komponente mithilfe der Komponentenfunktionalität von Vue.js erstellen. Hier ein einfaches Beispiel:

<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>

Jetzt haben wir eine universelle Popup-Komponente, die für jeden Zweck verwendet werden kann. Als Nächstes müssen wir den Anmeldestatus des Benutzers überprüfen, wenn er versucht, auf eine Seite zuzugreifen, für die eine Anmeldung erforderlich ist. Dies können wir mit den Navigationswächtern von Vue.js erreichen. In Vue.js ist ein Route Guard eine Reihe von Methoden, die wir vor, nach oder während der Navigation zu einer Route ausführen können. In unserem Fall verwenden wir den Navigationsschutz „beforeEach“, der jedes Mal ausgeführt wird, wenn der Benutzer eine neue Seite besucht.

In unserer Vue.js-Anwendung können wir Route Guards in der Datei router.js definieren. Hier ist ein Beispiel:

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

In diesem Beispiel definieren wir zwei Routen, eine ist die Home-Komponentenroute und die andere ist die Login-Komponentenroute. Wir haben einen „beforeEach“-Schutz für die gesamte Navigation der Anwendung definiert, der den Anmeldestatus des Benutzers überprüft, bevor er zu einer neuen Seite navigiert. Wenn der Benutzer nicht angemeldet ist und es sich bei der Seite nicht um eine Anmeldeseite handelt, zeigen wir eine Popup-Komponente auf dem Bildschirm an, um den Benutzer zur Anmeldung aufzufordern. Wir verwenden die Instanziierungsfunktion von Vue.js, um diese Popup-Komponente zu erstellen und sie zu zerstören, wenn der Benutzer das Popup-Fenster schließt. Abschließend prüfen wir, ob der Benutzer eingeloggt ist und erlauben ihm in diesem Fall, mit der Navigation fortzufahren.

Abschließend müssen wir sicherstellen, dass wir nach erfolgreicher Anmeldung des Benutzers seinen Status protokollieren. Wir können Vuex, die Statusverwaltungsbibliothek von Vue.js, verwenden, um den Status in der Anwendung zu verwalten. Hier ist ein Beispiel:

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

In diesem Beispiel definieren wir einen Status (isLoggedIn), eine „Login“-Mutation, um den Benutzer als angemeldet zu markieren, und eine „Logout“-Mutation, um den Benutzer abzumelden. Wir definieren auch Aktionen (Anmeldung) und (Abmeldung), um die Authentifizierungs- und Statusaktualisierungslogik hinter den Kulissen zu verwalten.

Jetzt haben wir ein Benutzer-Login-Popup in der Vue.js-Anwendung implementiert. Wir verwenden die nativen Lebenszyklusmethoden und Routennavigationswächter von Vue.js, um Benutzern die Authentifizierung und Autorisierung über verschiedene Vue-Komponenten und Anwendungszustände zu erleichtern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Popup-Fensterfunktion in Vue, um die Benutzeranmeldung zu ermitteln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!