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

こんにちは。KOUKIです。

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

1. Vuexで状態管理
2. ログアウト機能
3. Forgot機能
4. Password Reset機能

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

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

前回

Vuexで状態管理

Vuexでログイン状態を一元管理します。

ui/src/store配下のindex.jsに以下の実装をしてください。

この実装で、ログイン状態を管理します。authには、ログイン済->trueログアウト->falseが入る設計です。

mutationsは、プログラム内で状態が変化したことを検知するためのもので、actionsと紐づいたパラメータ名(setAuth)でなければなりません。actionsでは、authパラメータの状態を変化させます。

理解を深めるために、実際に使ってみましょう。

Home.vueを次のように修正します。

Vuexを使うには、useStoreをインポートします。

あとはそれをインスタンス化し、dispatchメソッドを実行して変化させたい状態をセットするだけです。

ログアウト機能

ログイン状態を管理できる様になったので、ログアウトを実装しましょう。Nav.vueを修正してください。

HTMLの以下の部分では、ログイン状態によって、表示するヘッダを切り替えてます。

JavaScript側の処理では、logout apiへリクエストを送信しています。

そして、store.dispatchメソッドで未ログイン状態に戻し、ログイン画面に戻る処理を実装しました。

Forgot機能

パスワードを忘れた時の機能を実装しましょう。

ページの作成

Forgot.vueにページを作成します。

ほとんどログインページと同じです。次に設定するrouteを実装すれば、以下の様に表示されます。

routeの作成

src/router/index.jsにForgotページへのルートを設定します。

ログイン画面からこのルートを介して、Forgotページを表示できるようにしましょう。

Email送信

forgot apiへリクエストを送って、メールを送信してみましょう。

個人的に「reactive」関数がめっちゃ使えると思いました。この関数で定義した変数に変化があった時、画面にリアルタイムに反映してくれるみたいです。

Email送信機能は、MailHogを使って実装しています。

動作確認

今回作成した機能の動作確認をしましょう。

Reset Password機能

続いて、パスワードをリセットする機能を実装します。

ページの作成

最初に、Reset Passwordページを作成します。

これは、Registerページとほぼ同じです。

routeの作成

router/index.jsにResetページへのルートを追加します。

他のパスと比べると「’/reset/:token’」は少し違っています。これは、動的ルートマッピングを使っています。こうすると「http://localhost:8080/reset/NVlgTeMaPEZQ」のような感じで、任意の文字列付きでリクエストを送信できます。

パスワードをリセット

最後にパスワードリセット処理を実装して完了です。とは言っても、Forgotの時とほぼ同じです。

面白いのは、URLからTokenを取得する処理ですね。

useRouteでインスタンス化します。

そして、以下のパラメーターからTokenを取得できます。

動作確認

MailHogからPassword Resetページへ遷移 -> パスワード変更 -> ログインの動きを確認してみましょう。

これで、完成です。お疲れ様でした!

おわりに

長くなりましたが、ようやく完成です。

UIが正直ダサいですけど、ユーザー認証機能は網羅できたのかなと思います^^

それでは、また!

Vue記事まとめ

コメントを残す