ログアウト
ユーザーコンテクストを使用して、ログアウト処理を実装します。
ログアウト処理の実装
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桁未満のパスワードを入力し、「登録する」ボタンをクリックしたとき、正しいエラーメッセージが表示されること
- 「ログアウト」ボタンをクリックしたとき、ログアウトができること