ユーザーのログインと認証に Vue を使用する方法

ユーザー ログインと認証に Vue を使用する方法

はじめに:
今日のインターネット時代では、ユーザー ログインと認証はほぼすべての Web アプリケーションの重要な機能です。最新の JavaScript フレームワークとして、Vue はユーザーのログインと認証を管理するためのシンプルかつ効率的な方法を提供します。この記事では、Vue を使用してユーザーのログインと認証を実装する方法を示し、コード例を示します。

1. 準備:
始める前に、Node.js と Vue CLI がインストールされていることを確認する必要があります。まだインストールされていない場合は、次のリンクからインストールできます。
Node.js: https://nodejs.org/
Vue CLI: https://cli.vuejs.org/

2. Vue プロジェクトを作成します。
次のコマンドを使用して、新しい Vue プロジェクトを作成します。

vue create login-app

プロンプトに従って、デフォルト構成またはカスタム構成を選択して Vue プロジェクトを作成します。

3. ルーティングの設定:
Vue プロジェクトの src ディレクトリに新しいルーティング フォルダーを作成し、その中にindex.js ファイルを作成します。 Index.js ファイルでは、ログイン ページとホーム ページの 2 つのルートを設定します。

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上記のコードでは、2 つのルートを設定しています。1 つはログイン ページ (Login)、もう 1 つはホーム ページ (Home) です。また、認証が必要なルートを指定するためのメタ フィールドも定義します。

4. ビュー コンポーネントの作成:
Vue プロジェクトの src ディレクトリに新しいビュー フォルダーを作成し、その中に 2 つのビュー コンポーネント Login.vue と Home.vue を作成します。ログイン ページとホームページのコンテンツとスタイルをそれぞれ定義します。

<!-- src/views/Login.vue -->

<template>
  <div>
    <h1 id="Login">Login</h1>
    <input type="text" v-model="username" placeholder="Username">
    <input type="password" v-model="password" placeholder="Password">
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 在此处编写登录逻辑
    }
  }
}
</script>

<!-- src/views/Home.vue -->

<template>
  <div>
    <h1 id="Welcome-to-Home">Welcome to Home</h1>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      // 在此处编写退出登录逻辑
    }
  }
}
</script>

上記のコードでは、Login.vue と Home.vue という 2 つのビュー コンポーネントをそれぞれ定義しました。 Login.vue コンポーネントでは、v-model を使用して入力ボックスの値をデータ内のユーザー名とパスワードにバインドします。同時に、ログイン ボタンがクリックされると、ログイン メソッドが呼び出され、ユーザーのログイン ロジックが処理されます。 Home.vue コンポーネントでは、ユーザーのログアウト ロジックを処理するログアウト メソッドを定義します。

5. 認証ロジックを追加します:
Vue プロジェクトの src ディレクトリに新しい plugins フォルダーを作成し、その中に auth.js ファイルを作成します。 auth.js ファイルには、ユーザーのログインと認証を実装するロジックを記述します。

// src/plugins/auth.js

export default {
  install(Vue) {
    Vue.prototype.$auth = {
      isAuthenticated: false,
      login(username, password) {
        // 在此处编写用户登录验证逻辑
        if (username === 'admin' && password === 'admin') {
          this.isAuthenticated = true
          return Promise.resolve()
        } else {
          return Promise.reject(new Error('Invalid username or password'))
        }
      },
      logout() {
        // 在此处编写用户退出登录逻辑
        this.isAuthenticated = false
        return Promise.resolve()
      }
    }
  }
}

上記のコードでは、3 つのフィールドと 2 つのメソッドを含む $auth オブジェクトを定義します。 isAuthenticated フィールドは、ユーザーがログインしたかどうかを判断するために使用されます。ログイン メソッドは、ユーザー名とパスワードが正しいかどうかを確認するために使用され、正しい場合は isAuthenticated フィールドが true に設定され、そうでない場合はエラー オブジェクトが返されます。 logout メソッドは、ログアウトして isAuthenticated フィールドを false に設定するために使用されます。

6. main.js に認証プラグインを登録します:
Vue プロジェクトの src ディレクトリにある main.js ファイルを開き、その中に認証プラグインを登録します。

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import auth from './plugins/auth'

Vue.config.productionTip = false

Vue.use(auth)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

7. ルーティング ガードでの認証:
Vue プロジェクトの src ディレクトリの router フォルダーにあるindex.js ファイルに、認証用のルーティング ガードを追加します。

// src/router/index.js

// ...省略其他代码

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = Vue.prototype.$auth.isAuthenticated

  if (requiresAuth && !isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

// ...省略其他代码

上記のコードでは、Vue.prototype.$auth.isAuthenticated を使用してユーザーがログインしているかどうかを判断します。ユーザーが認証を必要とするルートにアクセスしようとしたがログインしていない場合は、ログイン ページにリダイレクトされます。

8. ログイン ページとホームページで $auth オブジェクトを使用します:
Login.vue コンポーネントと Home.vue コンポーネントでは、ユーザー ログインのために this.$auth を通じて $auth オブジェクトにアクセスできます。 . およびログアウト操作。

<!-- src/views/Login.vue -->

<template>
  <!-- 省略其他代码 -->
  <button @click="login">Login</button>
</template>

<script>
export default {
  // 省略其他代码
  methods: {
    login() {
      this.$auth.login(this.username, this.password)
        .then(() => {
          this.$router.push('/home')
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<!-- src/views/Home.vue -->

<template>
  <!-- 省略其他代码 -->
  <button @click="logout">Logout</button>
</template>

<script>
export default {
  // 省略其他代码
  methods: {
    logout() {
      this.$auth.logout()
        .then(() => {
          this.$router.push('/')
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

上記のコードでは、this.$auth.login を使用してユーザーのログイン ロジックを処理し、成功した場合は this.$router.push を使用してホームページにジャンプします。 this.$auth.logout を使用してユーザーのログアウト ロジックを処理し、成功後に this.$router.push を使用してログイン ページにジャンプします。

結論:
この記事を通じて、ユーザーのログインと認証に Vue を使用する方法を学びました。ルートの設定、ビュー コンポーネントの作成、認証ロジックの追加、認証プラグインの登録、ルート ガードとコンポーネントでの $auth オブジェクトの使用により、ユーザー ログインと認証機能を正常に実装できました。この記事が、ユーザーのログインと認証に Vue を理解して使用するのに役立つことを願っています。

以上がユーザーのログインと認証に Vue を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。