Go言語とVue.jsで作るユーザー認証アプリ~フロントエンド開発編Vol2

こんにちは。KOUKIです。

前回に引き続き、ユーザー認証アプリの実装を行います。本記事は、主にフロントエンドで以下の処理について書きます。

1. ログイン機能
2. ユーザー認証機能

作業を始める前に、コンテナを起動しておきましょう。

コンテナを立ち上げたら、「localhost:8080」にアクセスしてみましょう。

前回

ログインの実装

ログイン機能を作成します。

ページの作成

最初にページを作成しましょう。

ログイン処理

次は、ログイン処理を実装します。処理自体は、registerとほぼ同じです。

ログインに成功した場合は、ログイン画面に遷移する処理を実装しました。

動作確認

動作確認をしましょう。登録済みのユーザーでログインしてください。

Homeに遷移したので、OKですね。ログインに失敗した場合に備えて、axios.postでエラーハンドリングをするべきですが、今回はしていません。

力試しで実装してみると面白いですよ。

ユーザー認証機能

ユーザー認証機能を作成します。これは、Home Pageに訪れたユーザーがログイン済みか否かを判定し、それぞれの状態に見合ったメッセージを画面に表示します。

ページの作成

Homeのページを作成します。

簡単ですが、これだけです。

{{ message }}は、宣言レンダリングというやつで、message変数に格納された値を表示することができます。

ユーザー認証処理

ユーザー情報は、API側でCookieに保存してあります。

詳細は、この記事を参考にしてください。

onMountedは、Vuejsのライフサイクルフックの一つです。

ページが読み込まれDOMに追加する前に、axios.getでユーザー情報を取得し、Cookieに情報があるかどうかを判定してから、画面を表示します。

ログインしていたら、こんな感じのページが表示されます。

逆にログインしていなかったら「You are not logged in!」の文字が表示されます。ログアウト処理は次の記事で実装します!

次回

次回も引き続き、Vue.jsを使ったフロントエンド開発を行います。

Vue記事まとめ

コメントを残す