こんにちは。KOUKIです。
前回に引き続き、ユーザー認証アプリの実装を行います。本記事は、主にフロントエンドで以下の処理について書きます。
1. ログイン機能
2. ユーザー認証機能
作業を始める前に、コンテナを起動しておきましょう。
|
1 2 |
// コンテナの起動 docker-compose up |
コンテナを立ち上げたら、「localhost:8080」にアクセスしてみましょう。
前回
ログインの実装
ログイン機能を作成します。
ページの作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
// Login.vue <template> <main class="form-login"> <form @submit.prevent="login"> <h1 class="h3 mb-3 fw-normal">Login</h1> <input v-model="email" type="email" class="form-control" placeholder="Email" required> <input v-model="password" type="password" class="form-control" placeholder="Password" required> <button class="w-100 btn btn-lg btn-primary" type="submit">Login</button> </form> </main> </template> <script> ... </script> <style> .form-login { width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-login .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } .form-login .form-control:focus { z-index: 2; } .form-login input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-login input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } </style> |
ログイン処理
次は、ログイン処理を実装します。処理自体は、registerとほぼ同じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script> import { ref } from 'vue' import axios from 'axios' import { useRouter } from 'vue-router' export default { name: "Login", setup() { const email = ref('') const password = ref('') const router = useRouter() const login = async () => { await axios.post('login', { email: email.value, password: password.value }) await router.push('/') } return { email, password, login } } } </script> |
ログインに成功した場合は、ログイン画面に遷移する処理を実装しました。
動作確認
動作確認をしましょう。登録済みのユーザーでログインしてください。
Homeに遷移したので、OKですね。ログインに失敗した場合に備えて、axios.postでエラーハンドリングをするべきですが、今回はしていません。
力試しで実装してみると面白いですよ。
ユーザー認証機能
ユーザー認証機能を作成します。これは、Home Pageに訪れたユーザーがログイン済みか否かを判定し、それぞれの状態に見合ったメッセージを画面に表示します。
ページの作成
Homeのページを作成します。
|
1 2 3 4 5 |
<template> <div class="container"> <h1>{{ message }}</h1> </div> </template> |
簡単ですが、これだけです。
{{ message }}は、宣言レンダリングというやつで、message変数に格納された値を表示することができます。
ユーザー認証処理
ユーザー情報は、API側でCookieに保存してあります。
詳細は、この記事を参考にしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
export default { name: "Home", setup() { const message = ref('You are not logged in!') onMounted(async () => { // user情報を取得 // ログイン情報は、Cookieに保存してあるので、 // リクエストするだけでOK const { data } = await axios.get('user') message.value = `Hi ${data.first_name} ${data.last_name}` }) return { message } } } </script> |
onMountedは、Vuejsのライフサイクルフックの一つです。
ページが読み込まれDOMに追加する前に、axios.getでユーザー情報を取得し、Cookieに情報があるかどうかを判定してから、画面を表示します。
ログインしていたら、こんな感じのページが表示されます。
逆にログインしていなかったら「You are not logged in!」の文字が表示されます。ログアウト処理は次の記事で実装します!
次回
次回も引き続き、Vue.jsを使ったフロントエンド開発を行います。
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。