Laravel Passport+Vue前端认证异常：已获取Token但访问auth:api路由提示‘Unauthenticated’求助

嘿，我帮你分析下这个问题——核心原因很明确：你必须在每次请求后端API时携带Token，Laravel的auth:api中间件就是靠校验请求里的Token来确认用户身份的。下面一步步帮你搞定：

一、先把前端请求自动带Token的问题解决掉 #

你已经把Token存在localStorage了，但axios默认不会自动把它加到请求头里，所以后端根本不知道你是谁。有两种办法处理：

1. 全局配置axios（推荐一劳永逸） #

在Vue项目的入口文件（比如main.js）里加这段代码，让所有axios请求自动带上Authorization头：

import axios from 'axios'

// 先配置API基础地址（如果还没弄的话）
axios.defaults.baseURL = '你的后端API根地址，比如http://localhost:8000/api'

// 添加请求拦截器，自动带上Token
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('access_token')
    if (token) {
      // 注意格式是Bearer + 空格 + Token
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => Promise.reject(error)
)

2. 单个请求手动加头（不推荐，太麻烦） #

如果不想全局配置，也可以在每个需要认证的请求里手动加头：

axios.get('/budget', {
  headers: {
    Authorization: `Bearer ${localStorage.getItem('access_token')}`
  }
})

另外，你的Vuex mutations里有个小bug，setToken函数没接收state参数，应该改成这样：

const mutations = {
    setToken: (state, token) => state.token = token
}

二、修复后端LoginController的逻辑错误 #

看你的LoginController代码，这里有个完全反转的逻辑问题：

if(Auth::attempt($login)) {
    return response(['message' => 'Invalid login']);
}

Auth::attempt($login)成功验证用户身份时会返回true，但你这里反而返回"无效登录"的错误——这会导致正确的登录请求返回错误，错误的登录才会生成Token，完全搞反了！赶紧改成：

if(!Auth::attempt($login)) { // 这里加个!取反
    return response(['message' => 'Invalid login'], 401); // 最好加上401未授权状态码
}

三、额外的几个检查点 #

1. 确认你的User模型引入了HasApiTokens trait：

use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
    // ... 其他代码
}

因为你用了createToken方法，这个是Passport提供的，必须加这个trait才能用。

2. 确认你已经创建了Passport密码授权客户端：
   如果还没创建，在终端运行：

php artisan passport:client --password

然后把生成的客户端ID和密钥填到.env文件里：

PASSPORT_CLIENT_ID=生成的ID
PASSPORT_CLIENT_SECRET=生成的密钥

3. 确认config/auth.php里的api guard驱动是passport：

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'passport', // 这里必须是passport
        'provider' => 'users',
        'hash' => false,
    ],
],

按照上面的步骤调整后，应该就能顺利通过auth:api中间件的认证了。

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