Laravel 9+Vue3 Composition API获取登录用户数据时401未授权求助

针对你使用Laravel 9 + Vue 3 Composition API时，登录后调用/api/auth/profile接口始终报401的问题，按以下步骤逐一排查：

1. 确保Axios请求自动携带Bearer Token #

你已将access_token存入localStorage，但Axios并未自动将该Token添加到请求头中。修改Axios配置，添加请求拦截器自动携带Token：

const client = axios.create({
    withCredentials: true,
    baseURL: import.meta.env.VUE_APP_API_URL || "http://localhost:8000",
    headers: {
      "Content-Type": "application/json",
      "X-Requested-With": "XMLHttpRequest",
    },
});

// 新增请求拦截器，自动注入Token
client.interceptors.request.use(config => {
    const token = localStorage.getItem('access_token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

同时，调用接口时必须使用这个配置好的client实例，而非全局axios：

// 替换原有的axios.get调用
let response = await client.get("/api/auth/profile");

2. 配置Sanctum可信SPA域名 #

打开config/sanctum.php，找到stateful数组，添加你的前端域名（比如Vue运行在3000端口就添加'localhost:3000'）：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
    env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

同时在.env文件中补充配置：

SANCTUM_STATEFUL_DOMAINS=localhost:3000

3. 检查登录接口的Token生成逻辑 #

确认AuthenticationController的login方法正确生成Sanctum专属Token，示例代码如下：

use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;

public function login(Request $request)
{
    $validated = $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);

    if (!Auth::attempt($validated)) {
        return response()->json(['message' => '账号或密码错误'], 401);
    }

    $user = Auth::user();
    // 生成Sanctum认证Token
    $token = $user->createToken('auth_token')->plainTextToken;

    return response()->json([
        'access_token' => $token,
        'user' => $user
    ]);
}

必须调用createToken方法生成Sanctum Token，否则无法通过auth:sanctum中间件验证。

4. 完善CORS配置 #

打开config/cors.php，确保以下配置正确：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'], // 你的前端完整地址
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

注意paths需包含sanctum/csrf-cookie，allowed_origins要指定具体前端域名（开启supports_credentials后不能用通配符*）。

5. 验证会话Cookie传递（可选，若依赖Cookie认证） #

如果选择依赖Cookie而非Token维持会话，需确保：

• 前端请求始终开启withCredentials: true（你已配置）
• .env中SESSION_DOMAIN=localhost配置正确
• 可删除localStorage存储Token的逻辑，直接依赖Sanctum的会话Cookie完成认证

按以上步骤逐一验证调整，即可解决401未授权问题。

内容的提问来源于stack exchange，提问作者trying to solve this problem