基于Laravel Sanctum的跨域前端登录及数据持久化问题咨询

一、Laravel Breeze React是否合适？ #

完全可以用，但需要修改它默认的认证逻辑——Breeze默认对接同项目的Laravel Auth，而你的前端是独立部署的跨域项目，只要替换掉内部的请求逻辑，改成调用你的admin.domain.com/api/v1/login接口即可。

二、前端登录实现步骤 #

1. 替换Breeze的登录请求逻辑
   找到Breeze生成的登录组件（通常在resources/js/Pages/Auth/Login.jsx），把默认的本地登录请求改成跨域请求到后端接口，带上email、password、source参数：

   const handleSubmit = async (event) => {
       event.preventDefault();
       setProcessing(true);
   
       try {
           const response = await fetch('https://admin.domain.com/api/v1/login', {
               method: 'POST',
               headers: {
                   'Content-Type': 'application/json',
                   'Accept': 'application/json',
               },
               body: JSON.stringify({
                   email: form.email,
                   password: form.password,
                   source: 'affiliate' // 按需求传入source参数值
               })
           });
   
           const data = await response.json();
   
           if (response.ok) {
               // 登录成功后处理token和用户数据（后续持久化部分）
               navigate('/dashboard');
           } else {
               setErrors(data.errors || { email: ['登录失败，请检查账号密码'] });
           }
       } catch (error) {
           setErrors({ email: ['网络错误，请稍后重试'] });
       } finally {
           setProcessing(false);
       }
   };
   

   注意：后端需配置Sanctum跨域支持，在config/cors.php中将affiliates.domain.com加入allowed_origins，并把supports_credentials设为true。

2. 后续请求携带Token
   登录成功后，后端返回的Sanctum Token需要在后续API请求的Authorization头中携带，格式为Bearer {token}：

   const fetchUserProfile = async () => {
       const token = localStorage.getItem('sanctum_token');
       const response = await fetch('https://admin.domain.com/api/v1/user', {
           headers: {
               'Authorization': `Bearer ${token}`,
               'Accept': 'application/json',
           }
       });
       return await response.json();
   };
   

三、前端用户数据持久化 #

用浏览器的localStorage或sessionStorage存储数据，前者永久保存（手动清除才会消失），后者随浏览器关闭失效，按需选择：

• 登录成功时存储：

  localStorage.setItem('sanctum_token', data.token);
  localStorage.setItem('user', JSON.stringify(data.user));
  

• 页面初始化时读取：

  useEffect(() => {
      const token = localStorage.getItem('sanctum_token');
      const user = JSON.parse(localStorage.getItem('user'));
      if (token && user) {
          // 将数据存入状态管理（如React Context、Redux）
          setAuthUser(user);
          setToken(token);
      }
  }, []);
  

• 登出时清除：

  const handleLogout = () => {
      localStorage.removeItem('sanctum_token');
      localStorage.removeItem('user');
      navigate('/login');
  };
  

若项目复杂，可配合状态管理工具（如Zustand、Redux）维护用户状态，同时同步到本地存储。

四、处理Breeze依赖Eloquent模型的问题 #

Breeze React只是前端模板，它提到的Laravel Auth依赖是指后端的认证系统，你的前端是独立项目，完全不需要Eloquent模型——所有用户数据和认证逻辑都由admin.domain.com后端处理，前端只需要接收并使用后端返回的用户数据即可。

你需要做的是：

1. 删除Breeze生成的后端相关文件（如app/Models/User.php、routes/auth.php），前端不需要本地后端。
2. 修改Breeze前端代码中的用户逻辑，直接使用后端返回的用户数据结构，无需适配本地Eloquent模型格式。比如展示用户信息时，直接读取本地存储或状态管理中的用户数据即可。

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