사용자 로그인을 확인하기 위해 vue에서 팝업 창 기능을 만드는 방법

최신 웹 애플리케이션에서는 사용자 인증 및 승인이 매우 중요합니다. 이를 위해 많은 애플리케이션에서는 사용자가 로그인되어 있는지 확인하고 그렇지 않은 경우 강제로 로그인하도록 해야 합니다. Vue.js에서는 라이프사이클 메소드와 경로 탐색 가드를 사용하여 이를 쉽게 달성할 수 있습니다. 이 기사에서는 Vue.js를 사용하여 사용자 로그인을 확인하는 팝업 창을 만드는 방법을 소개합니다.

먼저 메시지를 표시하고 사용자가 팝업 창을 닫을 수 있도록 하는 일반 팝업 구성 요소를 정의해야 합니다. Vue.js의 구성 요소 기능을 사용하여 이 구성 요소를 만들 수 있습니다. 간단한 예는 다음과 같습니다.

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

이제 어떤 목적으로도 사용할 수 있는 범용 팝업 구성 요소가 생겼습니다. 다음으로, 로그인이 필요한 페이지에 사용자가 접근하려고 할 때 사용자의 로그인 상태를 확인해야 합니다. Vue.js의 네비게이션 가드를 사용하여 이를 달성할 수 있습니다. Vue.js에서 경로 가드는 경로 탐색 전, 후 또는 도중에 실행할 수 있는 메서드 집합입니다. 우리의 경우에는 사용자가 새 페이지를 방문할 때마다 실행되는 "beforeEach" 탐색 가드를 사용합니다.

Vue.js 애플리케이션에서는 router.js 파일에 경로 가드를 정의할 수 있습니다. 예는 다음과 같습니다.

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

이 예에서는 두 개의 경로를 정의합니다. 하나는 홈 구성 요소 경로이고 다른 하나는 로그인 구성 요소 경로입니다. 새 페이지로 이동하기 전에 사용자의 로그인 상태를 확인하는 애플리케이션의 전체 탐색에 대해 "beforeEach" 가드를 정의했습니다. 사용자가 로그인하지 않았고 페이지가 로그인 페이지가 아닌 경우 화면에 팝업 구성 요소를 표시하여 사용자에게 로그인하라는 메시지를 표시합니다. 우리는 Vue.js의 인스턴스화 기능을 사용하여 이 팝업 구성 요소를 생성하고 사용자가 팝업 창을 닫기로 선택하면 이를 제거합니다. 마지막으로 사용자가 로그인되어 있는지 확인하고 로그인되어 있으면 사용자가 탐색을 계속할 수 있도록 허용합니다.

마지막으로 사용자가 성공적으로 로그인한 후 상태를 기록하는지 확인해야 합니다. Vue.js의 상태 관리 라이브러리인 Vuex를 사용하여 애플리케이션의 상태를 관리할 수 있습니다. 예는 다음과 같습니다.

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

이 예에서는 상태(isLoggedIn), 사용자를 로그인한 것으로 표시하는 "login" 변형, 사용자를 로그아웃하는 "logout" 변형을 정의합니다. 또한 백그라운드에서 인증 및 상태 업데이트 논리를 처리하기 위한 작업(로그인) 및 (로그아웃)을 정의합니다.

이제 Vue.js 애플리케이션에 사용자 로그인 팝업을 구현했습니다. 우리는 Vue.js의 기본 라이프사이클 방법과 경로 탐색 가드를 사용하여 사용자가 다양한 Vue 구성 요소 및 애플리케이션 상태를 통해 쉽게 인증하고 권한을 부여할 수 있도록 합니다.

위 내용은 사용자 로그인을 확인하기 위해 vue에서 팝업 창 기능을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!