Laravel8+Vue3中如何禁止用户直接访问接口路由同时保证axios可正常请求

1. 给axios配置全局请求头 #

Laravel通过X-Requested-With请求头区分异步请求和普通浏览器请求，先在Vue入口文件（如main.js）中添加axios全局配置：

// 标识所有axios请求为异步AJAX请求
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// 若使用Laravel session或Sanctum认证，需开启携带cookie
axios.defaults.withCredentials = true;

同时可以添加全局响应拦截器，处理未登录状态下的自动跳转：

axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 401) {
      // 未登录时跳转到登录页
      window.location.href = '/login';
    }
    return Promise.reject(err);
  }
);

2. 配置路由和中间件 #

方案A（更规范）：接口迁移到api路由文件 #

Laravel的routes/api.php专门用于定义数据接口，路由默认带/api前缀，不会返回页面响应：

1. 将三个接口路由剪切到routes/api.php，并添加身份验证中间件：

Route::get('/trainee', [UserController::class, 'getTrainees'])->middleware('auth:sanctum');
Route::get('/instructor', [UserController::class, 'getInstructors'])->middleware('auth:sanctum');
Route::get('/acpCenter', [AcpCenterController::class, 'getAcpCenter'])->middleware('auth:sanctum');

2. 修改Vue中AXIOS全局变量的前缀，添加/api即可，比如原AXIOS值为/的话改为/api/。
   此时用户直接在地址栏输入路由地址只会得到JSON响应，未登录时返回401状态码，不会出现业务页面，符合要求。

方案B：保留在web路由文件中 #

如果不想修改前端请求地址，直接给web.php中的路由添加auth中间件即可：

Route::get('/trainee', [UserController::class, 'getTrainees'])->middleware('auth');
Route::get('/instructor', [UserController::class, 'getInstructors'])->middleware('auth');
Route::get('/acpCenter', [AcpCenterController::class, 'getAcpCenter'])->middleware('auth');

Laravel会自动判断请求类型：普通浏览器访问未登录时跳转到登录页，axios异步请求未登录时返回401JSON响应，已登录时正常返回数据。
如果使用Laravel自带的CORS配置，需确认config/cors.php中supports_credentials参数设置为true。

3. 额外防护（可选） #

如果需要完全禁止非AJAX请求访问接口，可以在对应控制器方法开头添加校验逻辑：

// 非AJAX请求直接跳转登录页
if (!request()->ajax()) {
    return redirect()->route('login');
}

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