Apps

011-Login｜Step5_ReactでLogin機能を実装：ヘッダーとメニューの作成

ログイン後の画面にヘッダーとメニューを追加し、ログインユーザーを表示するようにします。
また、ログアウト機能を実装し、ユーザーがログアウトできるようにします。

実装内容

  1. Header.js の作成（Material UI を使用）
  2. メニュー (BasicMenu.js) の実装
  3. ログアウト機能の実装

1. Header.js の作成（Material UI を使用）

ヘッダーを作成し、ログインユーザー名を表示できるようにします。

src/components/templates/Header.js

import React, { useContext } from 'react';
import { AppBar, Toolbar, Typography, Button, Box } from '@mui/material';
import BasicMenu from '../elements/BasicMenu';
import Grid from '@mui/material/Grid';
import { LoginUserContext } from '../providers/LoginUserProvider';

const Header = () => {
  const { loginUser } = useContext(LoginUserContext);

  return (
    <AppBar position="static">
      <Toolbar>
        <Box sx={{ flexGrow: 1 }}>
          <Grid container spacing={2}>
            <Grid item xs={1}>
              <BasicMenu />
            </Grid>
            <Grid item xs={10} sx={{ py: 1 }}>
              <Typography variant="body1" component="div">
                ログインユーザー: {loginUser}
              </Typography>
            </Grid>
          </Grid>
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

解説

  • AppBar と Toolbar を使ってヘッダーを作成。
  • BasicMenu（メニュー）をヘッダーの左端に配置。
  • LoginUserContext を利用してログインユーザー名を表示。

2. メニュー (BasicMenu.js) の実装

メニューには「ホーム」と「ログアウト」の項目を追加します。

src/components/elements/BasicMenu.js

import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { useNavigate } from 'react-router-dom';
import { useContext } from 'react';
import { LoginUserContext } from '../providers/LoginUserProvider';

export default function BasicMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const navigate = useNavigate();
  const { setLoginUser, setIsLogined } = useContext(LoginUserContext);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleClickHome = () => {
    navigate('/');
    handleClose();
  };

  const handleClickLogout = () => {
    setLoginUser('');
    setIsLogined(false);
    navigate('/login');
    handleClose();
  };

  return (
    <div>
      <Button
        id="basic-button"
        aria-controls={open ? 'basic-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
        color="inherit"
      >
        MENU
      </Button>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
      >
        <MenuItem onClick={handleClickHome}>ホーム</MenuItem>
        <MenuItem onClick={handleClickLogout}>ログアウト</MenuItem>
      </Menu>
    </div>
  );
}

解説

  • Menu コンポーネントを使ってメニューを作成。
  • 「ホーム」ボタンをクリックすると navigate("/") でトップページへ移動。
  • 「ログアウト」ボタンをクリックすると setLoginUser('') & setIsLogined(false) でログアウト処理を実行。

3. ログアウト機能の実装

BasicMenu.js の handleClickLogout にログアウト処理を実装しました。
ログアウト時の動作：

  1. setLoginUser('') でログインユーザーをリセット。
  2. setIsLogined(false) でログイン状態を解除。
  3. navigate('/login') でログイン画面へ遷移。

まとめ

  • Header.js を作成し、ヘッダーにログインユーザー名を表示。
  • BasicMenu.js を作成し、メニューから「ホーム」と「ログアウト」を選択可能に。
  • ログアウト時に setLoginUser('') と setIsLogined(false) を設定し、ログイン画面へリダイレクト。

これでヘッダーとメニューの実装が完了しました！ 🎉

-Apps