ホームページ > 記事 > ウェブフロントエンド > ユーザーのログインを確認するために 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 サイトの他の関連記事を参照してください。