[React]~Admin画面5:ログイン認証とログアウトの実装 ~

こんにちは、KOUKIです。Reactで画面開発を行なっています。

前回は、ログイン処理を実装しました。

今回は、ログイン認証とログアウトを実装します。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

事前準備

フォルダ/ファイル

コンポーネントとProps

Reactには、UIを部品として独立させ、再利用性を向上させるコンポーネントと呼ばれる概念があります。

DashboardのナビゲーションやMenuなどをUserページから切り離して、コンポーネント化しましょう。

コンポーネントを作る方法は、2つあります。関数コンポーネントとクラスコンポーネントです。

上記は、関数コンポーネントで実装しました。

Layoutの引数(props: any)には、Props(プロパティの意味)を指定しています。こうすると、Layoutで括ったHTML要素をこのpropsに渡すことができます。

上記では、Propsとしてtable要素を渡しています。それを、Layoutコンポーネント側で「{props.children}」を指定して取り出しています。

docker-compose upでコンテナを起動して、「http://localhost:3000」にアクセスしてみましょう。

コンポーネント化した後でも、Dashboardが表示されていたら成功です。

ログイン認証機能

前回、ログイン機能を実装しました。その時は触れなかったのですが、ログインが成功するとブラウザ上にCookie情報が登録されます。

この情報は、ユーザーがログインの有無を確認する認証機能として利用できます。

ログイン済みかチェックする

先ほど実装したLayout関数に、ログイン認証機能を実装してみましょう。

useEffectを使って、ページの表示後にAPI側へユーザー情報を取得する処理を実装しました。

前回、index.tsxに「axios.defaults.withCredentials = true」を設定したので、axios通信にはCookie情報を必須としました。

もし情報の取得に失敗した場合、未認証扱いとしてログイン画面にリダイレクトします。

Cookieは、ブラウザから「右クリック->Deleteボタン」で消すことができるので、削除後に「http://localhost:3000/」にアクセスして、ログイン画面に戻るか確認してください。

Cookieを削除する
ログインページにリダイレクト

ログアウト

ユーザー認証ができたので、今度はログアウト処理を実装しましょう。

これが実装できれば、わざわざブラウザからCookieを手動で削除しなくて済みますからね^^

Propsインターフェースの定義

ログアウトは、Navコンポーネントに追加します。

その際に、親ページのLayoutからユーザー情報をPropsとして渡す必要があります。

本アプリではTypeScriptを使用しており、Propsの型が必要になるので、models/user.tsに実装しましょう。

この型は、Navコンポーネントにパラメータとして指定します。

続いて、Layout.tsxからユーザー情報をNavコンポーネントに渡します。

追加した処理は、以下です。

  1. useStateを使って、Reactアプリにユーザー情報を状態として持たせる
  2. axiosのPOSTリクエスト後に、ユーザー情報をセットする
  3. Navコンポーネントに、ユーザー情報をPropsとして渡す

ルーティング処理

次に、Nav.tsxのreturnの中身を書きます。

ここでは、ReactのLinkを使って、ルーティング処理を実装しました。

ログアウトの実装

最後に、ログアウトを実装します。

index.tsxに、ベースとなるURLを設定しているので、’logout’を指定するだけで、API側へリクエストを送信できます。

検証

検証してみましょう。

次回

次回は、ユーザー一覧の実装をしましょう。

Reactまとめ

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

Layout.tsx

Nav.tsx

user.ts

Menu.tsx

User.tsx

コメントを残す