Laravel+React项目如何限制仅认证用户可访问自身关联的用户资料

你需要同时做前端校验和后端强制校验，仅靠前端防护可以被轻易绕过，后端校验才是权限控制的核心。

1. 前端页面校验（优化体验用） #

在/customize/:id对应的Home组件内，先获取当前登录用户ID与路由携带的资料ID，请求到资料数据后对比归属：

import { useParams, useNavigate } from 'react-router-dom';

const Home = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  // 取当前登录用户信息
  const currentUser = JSON.parse(localStorage.getItem('userData'));

  useEffect(() => {
    // 先校验登录状态，未登录直接跳转登录页
    if (!localStorage.getItem('isLoggedIn') || !currentUser) {
      navigate('/login');
      return;
    }
    // 请求对应ID的资料详情
    axios.get(`http://localhost:8000/api/profile/${id}`)
      .then(res => {
        const profile = res.data;
        // 对比资料归属用户ID与当前登录用户ID
        if (profile.user_id !== currentUser.id) {
          alert('你无权限访问该资料');
          // 可跳转至403页或用户自己的资料页
          navigate('/dashboard');
        }
        // 校验通过后正常渲染页面逻辑
      })
      .catch(err => console.log(err))
  }, [id, navigate, currentUser])

  // 其余页面逻辑省略
}

你也可以封装全局路由守卫高阶组件，统一处理所有需要鉴权页面的登录状态校验，避免重复代码。

2. 后端强制校验（安全核心，必须做） #

所有涉及资料查询、修改、删除的Laravel接口，都要加两层校验：

第一步：接口加认证中间件 #

建议使用Laravel Sanctum做API认证，登录成功后返回的token存在localStorage，给axios配置全局请求头默认携带token：

// 登录成功后存token，假设token存在response.data.data.token中
localStorage.setItem('auth_token', response.data.data.token);
// 全局配置axios请求头
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('auth_token')}`;

Laravel路由加auth:sanctum中间件校验登录状态：

Route::group(['middleware' => 'auth:sanctum'], function () {
  // 所有需要登录的接口都放这里
  Route::get('/api/profile/{id}', [ProfileController::class, 'show']);
  Route::put('/api/profile/{id}', [ProfileController::class, 'update']);
  Route::delete('/api/profile/{id}', [ProfileController::class, 'destroy']);
});

第二步：接口内校验资料归属 #

在对应的控制器方法中，强制校验请求的资料归属是否为当前登录用户：

public function show($id)
{
    $profile = Profile::findOrFail($id);
    // 校验归属不匹配直接返回403
    if ($profile->user_id !== auth()->id()) {
        return response()->json(['message' => '无权限访问'], 403);
    }
    return response()->json($profile);
}

// update、destroy方法加同样的归属校验逻辑即可

完成以上两步后，即可完全实现用户仅能管理自己关联的资料的需求。

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