Vue.js+Laravel7使用Sanctum进行SPA认证时提示“Unauthenticated”问题求助

嘿，我一眼就看到核心问题了——你把auth:sanctum中间件加到了登录接口上，这完全搞反了认证逻辑！

为什么会报"Unauthenticated"？ #

登录接口的作用是让未认证的用户获取认证凭证（token），所以它本身不应该要求用户已经完成认证。你给登录路由加上auth:sanctum中间件后，服务器会强制检查请求中是否携带有效的Sanctum token，但用户还没登录，根本没有这个token，自然直接返回Unauthenticated错误。

第一步：修正路由配置 #

先把登录接口的auth:sanctum中间件移除，这才是正确的路由写法：

Route::post('/teacher/login', 'Teacher\RegisterController@login');

第二步：完善登录控制器逻辑 #

你的当前控制器只返回了用户信息，但没有生成并返回Sanctum token——前端需要这个token来访问后续需要认证的接口。修改控制器代码：

public function login(Request $request){
    $credentials = $request->only('email', 'password');
    
    if(Auth::attempt($credentials)){
        $user = Auth::user();
        // 生成并返回Sanctum API token
        $token = $user->createToken('TeacherAuthToken')->plainTextToken;
        
        return response()->json([
            'user' => $user,
            'token' => $token
        ], 200);
    }
    
    // 别忘了处理认证失败的场景
    return response()->json(['message' => '邮箱或密码错误'], 401);
}

第三步：前端处理token并发起认证请求 #

登录成功后，前端需要保存token，并在后续请求中带上它：

login(){
  axios.defaults.withCredentials = true; // 确保携带csrf cookie
  axios.get('/sanctum/csrf-cookie').then(response => {
    this.form.post('api/teacher/login')
    .then( response => {
      console.log( response );
      // 把token存在localStorage或Vuex中
      localStorage.setItem('sanctum_token', response.data.token);
      // 配置axios默认携带认证头
      axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('sanctum_token')}`;
    })
    .catch( error => {
      console.log( error );
    })
  });
}

额外检查项（避免后续踩坑） #

如果你是前后端分离架构，还需要确认以下配置：

• 在config/sanctum.php中配置正确的有状态域名，确保前端域名在列表里：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,localhost:8080,127.0.0.1,127.0.0.1:8000,::1')),

• 在config/cors.php中开启supports_credentials：

'supports_credentials' => true,

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