Bagaimana untuk mencipta fungsi tetingkap timbul dalam vue untuk menentukan log masuk pengguna

Pengesahan dan kebenaran pengguna adalah sangat penting dalam aplikasi web moden. Untuk melakukan ini, banyak aplikasi perlu menentukan sama ada pengguna telah log masuk dan memaksa mereka untuk log masuk jika mereka tidak log masuk. Dalam Vue.js kita boleh mencapai ini dengan mudah menggunakan kaedah kitaran hayat dan pengawal navigasi laluannya. Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk mencipta tetingkap timbul untuk menentukan log masuk pengguna.

Pertama, kita perlu menentukan komponen pop timbul umum yang memaparkan mesej dan membenarkan pengguna menutup tetingkap timbul. Kita boleh mencipta komponen ini menggunakan fungsi komponen Vue.js. Berikut ialah contoh mudah:

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

Kini kami mempunyai komponen pop timbul universal yang boleh digunakan untuk sebarang tujuan. Seterusnya, kita perlu menyemak status log masuk pengguna apabila mereka cuba mengakses halaman yang memerlukan log masuk. Kita boleh mencapai ini menggunakan pengawal navigasi Vue.js. Dalam Vue.js, pengawal laluan ialah satu set kaedah yang boleh kita jalankan sebelum, selepas, atau semasa navigasi ke laluan. Dalam kes kami, kami akan menggunakan pengawal navigasi "beforeEach", yang akan dijalankan setiap kali pengguna melawat halaman baharu.

Dalam aplikasi Vue.js kami, kami boleh mentakrifkan pengawal laluan dalam fail router.js. Berikut ialah contoh:

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

Dalam contoh ini, kami mentakrifkan dua laluan, satu ialah laluan komponen Home dan satu lagi ialah laluan komponen Log masuk. Kami menentukan pengawal "beforeEach" untuk keseluruhan navigasi aplikasi yang menyemak status log masuk pengguna sebelum mereka menavigasi ke halaman baharu. Jika pengguna tidak log masuk dan halaman tersebut bukan halaman log masuk, maka kami akan memaparkan komponen pop timbul pada skrin untuk menggesa pengguna log masuk. Kami menggunakan fungsi instantiasi Vue.js untuk mencipta komponen pop timbul ini dan memusnahkannya apabila pengguna memilih untuk menutup tetingkap timbul. Akhir sekali, kami menyemak sama ada pengguna telah log masuk dan jika ya, benarkan pengguna meneruskan navigasi.

Akhir sekali, kita perlu memastikan bahawa selepas pengguna berjaya log masuk, kita log status mereka. Kami boleh menggunakan Vuex, perpustakaan pengurusan negeri Vue.js, untuk mengurus keadaan dalam aplikasi. Berikut ialah contoh:

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

Dalam contoh ini kami mentakrifkan keadaan (isLoggedIn), varian "log masuk" untuk menandakan pengguna sebagai log masuk dan varian "log keluar" untuk log keluar pengguna "Mutasi. Kami juga mentakrifkan tindakan (log masuk) dan (log keluar) untuk mengendalikan logik pengesahan dan kemas kini status di sebalik tabir.

Kini kami telah melaksanakan pop timbul log masuk pengguna dalam aplikasi Vue.js. Kami menggunakan kaedah kitaran hayat asli Vue.js dan pengawal navigasi laluan untuk memudahkan pengguna mengesahkan dan memberi kebenaran melalui komponen dan keadaan aplikasi Vue yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk mencipta fungsi tetingkap timbul dalam vue untuk menentukan log masuk pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!