Laravel Passport理解困惑咨询：Laravel5.5+VueJs项目疑问

我明白你查了不少资料还是对Passport的集成有点懵，结合你的Laravel5.5+Vue+axios的具体场景，我给你梳理一套一步步能落地的方案，应该能帮你理清思路：

1. 安装并初始化 Passport #

先在项目根目录执行安装命令：

composer require laravel/passport

安装完成后，发布迁移文件并执行数据库迁移：

php artisan migrate
php artisan passport:install

这一步会生成加密密钥，以及OAuth2所需的客户端凭证和个人访问令牌。

接下来修改User模型，添加HasApiTokens trait来赋予用户生成令牌的能力：

use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
    // ... 模型原有代码
}

然后在AuthServiceProvider的boot方法里注册Passport的路由：

use Laravel\Passport\Passport;

public function boot()
{
    $this->registerPolicies();
    Passport::routes();
    
    // 可选：自定义令牌过期时间，比如设置为15天
    Passport::tokensExpireIn(now()->addDays(15));
}

2. 配置API认证守卫 #

打开config/auth.php，把API guard的驱动改成passport，这样API路由就会用Passport来处理认证：

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

    'api' => [
        'driver' => 'passport', // 替换原有的token驱动
        'provider' => 'users',
    ],
],

3. 前端axios全局配置（适配Vue场景） #

因为你所有请求都用axios发送，得让它自动携带认证令牌。首先你需要先写一个登录接口，在api.php里添加：

// 公开的登录接口，不需要认证
Route::post('/login', 'Auth\LoginController@login');

然后在LoginController里实现登录逻辑，返回访问令牌：

public function login(Request $request)
{
    $credentials = $request->only('email', 'password');

    if (Auth::attempt($credentials)) {
        $user = Auth::user();
        // 生成个人访问令牌
        $token = $user->createToken('MyAppClient')->accessToken;
        return response()->json(['token' => $token], 200);
    }

    return response()->json(['error' => '账号或密码错误'], 401);
}

接下来在Vue的入口文件（比如app.js）里配置axios的请求拦截器，自动在请求头添加令牌：

import axios from 'axios';

// 设置API基础路径
axios.defaults.baseURL = '/api';

// 请求拦截器：自动携带令牌
axios.interceptors.request.use(config => {
    const token = localStorage.getItem('access_token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
}, error => Promise.reject(error));

// 响应拦截器：处理令牌过期的情况（可选）
axios.interceptors.response.use(response => response, error => {
    if (error.response?.status === 401) {
        localStorage.removeItem('access_token');
        // 跳转到登录页，根据你的路由配置调整
        window.location.href = '/login';
    }
    return Promise.reject(error);
});

window.axios = axios;

用户登录成功后，记得把后端返回的token存在localStorage里：

// 比如在登录组件的登录方法里
axios.post('/login', { email: this.email, password: this.password })
    .then(res => {
        localStorage.setItem('access_token', res.data.token);
        // 跳转到需要认证的页面
        this.$router.push('/dashboard');
    })
    .catch(err => {
        console.error(err.response.data.error);
    });

4. 保护你的API路由 #

现在把需要认证的路由用auth:api中间件包裹起来，修改你的api.php：

// 需要认证的路由组
Route::middleware('auth:api')->group(function(){
    Route::get('/prepare/', 'CompgenApiController@prepareDefault');
    Route::post('/replace/', 'CompgenApiController@replaceImage');
    Route::get('/replaceall/', 'CompgenApiController@replaceAllImages');
});

// 公开路由（无需认证）
Route::post('/login', 'Auth\LoginController@login');
Route::post('/register', 'Auth\RegisterController@register'); // 若有注册需求

常见问题排查 #

• CORS跨域问题：如果是前后端分离部署，需要配置CORS。Laravel5.5可以安装barryvdh/laravel-cors包，安装后在config/cors.php里配置允许的域名、请求头和请求方法。
• 令牌刷新：如果需要实现令牌自动刷新，登录时可以同时返回refresh_token，当access_token过期时，用refresh_token调用/oauth/token接口获取新的令牌。
• 本地测试：确保axios的baseURL和你的Laravel服务地址一致，比如Laravel运行在http://localhost:8000，那么baseURL就设为http://localhost:8000/api。

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