告别 401 未授权错误：Laravel 7 + Vue.js 3 + Passport 解决方案全攻略

Laravel 7 + Vue.js 3 + Passport：消灭 401 未授权错误怪兽

介绍

在 Laravel 7、Vue.js 3 和 Passport 三剑客的协作中，401 未授权错误时常出没，令程序员头疼不已。本文将深入探究问题的根源，并提供一整套解决方案，助你轻松消灭这只怪兽。

问题根源

401 未授权错误的出现表明，你的应用程序未能正确验证用户的身份。这可能是由于以下原因造成的：

• 无效的 API 令牌
• 路由未受保护
• Passport 路由未注册
• 用户模型未包含必要的特性

解决方案

1. 模型配置

确保 User 模型继承了 HasApiTokens 特性，允许生成 API 令牌。

class User extends Model
{
    use HasApiTokens;
}

2. Passport 路由

在 AuthServiceProvider 中注册 Passport 路由。

public function bootPassport()
{
    Route::group(['middleware' => 'api'], function () {
        Passport::routes();
    });
}

3. Passport 驱动

配置 config/auth.php，将 API 驱动设置为 Passport。

'api' => [
    'driver' => 'passport',
]

4. 用户令牌生成

使用 createToken 方法在 RegisterController 中生成用户令牌。

protected function create(array $data)
{
    $user = User::create([
        // ...
    ]);

    $token = $user->createToken('API Token');
    
    return ['user' => $user, 'token' => $token->accessToken];
}

5. Vue.js 授权头

在 Vue.js 应用程序中，使用 Axios 库时，设置授权头。

import axios from 'axios';

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

6. 路由保护

使用 api 中间件保护 API 路由。

Route::group(['middleware' => ['api', 'auth:api']], function () {
    Route::get('/public/api/posts', 'PostController@index');
});

其他提示

• 检查 API 令牌的有效性。
• 查看应用程序日志以获取更多信息。
• 尝试不同的浏览器或清除缓存和 cookie。

结论

通过遵循上述步骤，你可以有效解决 Laravel 7 + Vue.js 3 + Passport 中的 401 未授权错误。牢记这些解决方案，让你的应用程序免受未授权访问的困扰。

常见问题解答

• 为什么我的 API 令牌无效？ 可能是令牌已过期或已被吊销。
• 如何吊销 API 令牌？ 使用 revoke() 方法即可。
• 如何刷新 API 令牌？ 可使用 refresh() 方法。
• Passport 提供哪些范围？ Passport 提供了 create、update、delete 和 all 范围。
• 如何限制访问特定路由？ 使用中间件并检查用户权限即可。