ユーザーのログインを確認するために vue でポップアップ ウィンドウ関数を作成する方法

最新の Web アプリケーションでは、ユーザーの認証と認可が非常に重要です。これを行うには、多くのアプリケーションはユーザーがログインしているかどうかを判断し、ログインしていない場合は強制的にログインする必要があります。 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

この例では、2 つのルートを定義します。1 つはホーム コンポーネントのルート、もう 1 つはログイン コンポーネントのルートです。ユーザーが新しいページに移動する前にログイン ステータスをチェックする、アプリケーションのナビゲーション全体に対して「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 中国語 Web サイトの他の関連記事を参照してください。