如何在React中配置Laravel Passport API认证？求助排查404问题

问题背景 #

之前用Laravel Sanctum做API认证，得先获取CSRF Cookie才能完成登录。现在换Laravel Passport，找不到React相关的实战教程，自己写的登录代码不仅报404错误，后端还拿不到phoneNumber的值（已经确认手机号和密码输入没问题）。

我写的React登录代码 #

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

const Login = () => {
  const [password, setPassword] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const navigate = useNavigate();
  const [type, setType] = useState("password"); // 补充原代码缺失的type状态

  // 处理登录逻辑
  const handleSubmit = async (event) => {
    event.preventDefault();
    const submitData = { phoneNumber, password };

    try {
      const response = await axios.post("http://localhost:8000/api/login", submitData, {
        headers: {
          "Content-Type": "application/json",
          "Custom-Header": "value",
        },
      });
      localStorage.setItem("token", response.data.token);
      navigate('/home');
    } catch (error) {
      console.log("Error: ", error);
    }
  };

  return (
    <form
      className="pt-8 flex flex-col gap-4 px-6"
      onSubmit={(e) => handleSubmit(e)}
    >
      <input
        type="text"
        name="phoneNumber"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
        className="bg-transparent placeholder:text-g50 text-g60 outline-none text-sm placeholder:text-sm"
        placeholder="0123456789"
      />

      <input
        type={type}
        name="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        className="bg-transparent placeholder:text-g50 text-g60 outline-none text-sm placeholder:text-sm passwordField w-full pr-3"
      />

      <button className="primaryButton w-full" type="submit">
        Log In
      </button>
    </form>
  );
};

export default Login;

问题排查步骤 #

1. 404错误解决 #

• 检查Laravel后端routes/api.php是否存在POST类型的/api/login路由，示例：

  use App\Http\Controllers\AuthController;
  Route::post('/login', [AuthController::class, 'login']);
  

• 确认后端CORS配置正确：修改config/cors.php，设置paths包含api/*，allowed_origins添加前端地址（比如http://localhost:3000），allowed_methods包含POST。

2. 后端无法获取phoneNumber的解决 #

• 后端控制器要正确接收JSON参数：因为前端传的是JSON格式，需要用$request->json('phoneNumber')或者通过验证规则获取，示例控制器代码：

  public function login(Request $request)
  {
      $validated = $request->validate([
          'phoneNumber' => 'required|string',
          'password' => 'required|string',
      ]);
  
      if (!Auth::attempt($validated)) {
          return response()->json(['msg' => '账号或密码错误'], 401);
      }
  
      $token = Auth::user()->createToken('LoginToken')->accessToken;
      return response()->json(['token' => $token]);
  }
  

• 打开浏览器开发者工具的Network面板，查看登录请求的Payload，确认phoneNumber和password是否正确传递。

3. Laravel Passport基础配置检查 #

• 确保已经完成Passport安装：执行过composer require laravel/passport、php artisan migrate、php artisan passport:install。
• 用户模型要引入HasApiTokens trait：

  use Laravel\Passport\HasApiTokens;
  
  class User extends Authenticatable
  {
      use HasApiTokens, HasFactory, Notifiable;
      // ...
  }
  

• 在AuthServiceProvider的boot方法里注册Passport路由：

  public function boot()
  {
      $this->registerPolicies();
      Passport::routes();
  }
  

React + Laravel Passport实战要点 #

• Token存储与携带：登录成功后把token存在localStorage，后续请求通过Axios拦截器自动添加到请求头：

  axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  });
  

• Token过期处理：监听响应的401状态码，清除本地token并跳转到登录页：

  axios.interceptors.response.use(
    response => response,
    error => {
      if (error.response.status === 401) {
        localStorage.removeItem('token');
        navigate('/login');
      }
      return Promise.reject(error);
    }
  );
  

• 密码授权模式注意：Passport的密码授权模式不需要CSRF Cookie，这和Sanctum不同，不用额外请求CSRF接口。

内容的提问来源于stack exchange，提问作者nur najihah