Apps

011-Login｜Step7_ReactでLogin機能を実装：エラーハンドリングとログイン失敗画面

ログイン機能の基本的な動作は実装できましたが、実際のアプリでは ログイン失敗時のエラーハンドリング や ネットワークエラー時の処理 が重要です。
ここでは、ログインに失敗した際のエラーメッセージの表示や、ネットワークエラーが発生した場合の対処を実装します。

実装内容

  1. ログイン失敗時の処理 (LoginFailed.js)
  2. ネットワークエラー発生時の対応
  3. エラー処理を含むログイン機能の改良

1. ログイン失敗時の処理 (LoginFailed.js)

ユーザーが間違った情報を入力した場合、専用のエラーページ LoginFailed.js に遷移し、メッセージを表示するようにします。

src/components/pages/LoginFailed.js

import React from 'react';
import { useNavigate } from 'react-router-dom';

const LoginFailed = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>ログイン失敗</h1>
      <p>ユーザー名またはパスワードが間違っています。</p>
      <button onClick={() => navigate('/login')}>ログイン画面に戻る</button>
    </div>
  );
};

export default LoginFailed;

解説

  • ユーザーが間違った情報を入力した場合、このページにリダイレクト。
  • useNavigate() を使って ログイン画面に戻るボタン を実装。

2. ネットワークエラー発生時の対応

APIリクエストが失敗した際のエラーハンドリングも必要です。
たとえば、サーバーがダウンしている場合や、インターネット接続が切れている場合に、適切なエラーメッセージを表示します。

3. エラー処理を含むログイン機能の改良

実際のログイン機能にエラー処理を組み込みます。

src/components/pages/Login.js（修正）

import React, { useState, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { LoginUserContext } from '../providers/LoginUserProvider';

const Login = () => {
  const { setLoginUser, setIsLogined } = useContext(LoginUserContext);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleLogin = async () => {
    setError(''); // エラーリセット
    try {
      const response = await fetch('https://api.example.com/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password }),
      });

      if (!response.ok) {
        if (response.status === 401) {
          navigate('/login-failed'); // 401エラーならログイン失敗画面へ
        } else {
          throw new Error('ログインに失敗しました');
        }
      }

      const data = await response.json();
      setLoginUser(data.username);
      setIsLogined(true);
      navigate('/'); // ホーム画面へ遷移
    } catch (err) {
      setError('ネットワークエラーが発生しました。接続を確認してください。');
    }
  };

  return (
    <div>
      <h1>ログイン画面</h1>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <input
        type="text"
        placeholder="ユーザー名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="パスワード"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>ログイン</button>
    </div>
  );
};

export default Login;

解説

  • fetch() を用いたAPIリクエストでログイン処理を実行。
  • response.ok でログイン成否を判定し、401 の場合は /login-failed に遷移。
  • その他のエラー (500 など) や ネットワークエラー は setError() でメッセージを表示。

まとめ

  • LoginFailed.js でログイン失敗時の専用画面を用意。
  • APIリクエスト時の ネットワークエラー に対応。
  • 401 エラーなら ログイン失敗画面 に遷移、それ以外のエラーはエラーメッセージを表示。

これでログインのエラーハンドリングが完成しました！ 🎉

-Apps