ログアウト

ユーザーコンテクストを使用して、ログアウト処理を実装します。

ログアウト処理の実装

Loginコンポーネントと同様に、NavigationHeaderコンポーネントにログアウト処理を実装します。

src/components/navigation-header/NavigationHeader.tsx

export const NavigationHeader: React.FC = () => {
...
  const logout = async () => {
    await userContext.logout();
    window.location.href = '/';
  };
...

「ログアウト」ボタンをクリックしたら、ユーザーコンテクストのログアウト関数を実行するようにします。

動作確認

サインアップやログイン、ログアウト処理の実装ができたため、モックサーバとフロントエンドアプリを起動して動作確認をします。

モックサーバを起動していない場合は、frontendディレクトリで次のコマンドを実行します。

$ docker-compose -f docker/docker-compose.api-mock.yml up

フロントエンドアプリを起動していない場合は、frontendディレクトリで次のコマンドを実行します。

$ npm run dev

モックサーバとフロントエンドアプリが起動したら、ページを操作して動作を確認します。

モックサーバでは、データを保存することができないため、今動作確認できるものは以下です。

• ヘッダ部分にあるユーザー名とログイン状態の表示が正しいこと
• サインアップとログイン画面で、名前とパスワードを未入力のまま「登録する」または「ログインする」ボタンをクリックしたとき、正しいエラーメッセージが表示されること
• サインアップとログイン画面で、名前とパスワードどちらかを未入力のまま「登録する」または「ログインする」ボタンをクリックしたとき、未入力の方に正しいエラーメッセージが表示されること
• 4桁未満のパスワードを入力し、「登録する」ボタンをクリックしたとき、正しいエラーメッセージが表示されること
• 「ログアウト」ボタンをクリックしたとき、ログアウトができること