Vue JS 返回“未授权”的 Laravel Sanctum SPA多重身份验证身份验证问题

如何解决Vue JS 返回“未授权”的 Laravel Sanctum SPA多重身份验证身份验证问题

我的 Laravel 项目由 3 个独立的用户组成：管理员、供应商和客户。该项目混合了服务器端渲染和随处嵌入的 Vue 组件。

我的守卫如下

    'guards' => [
        'web' => [
            'driver' => 'session','provider' => 'users',],'vendor-api' => [
            'driver' => 'sanctum','provider' => 'vendors','admin-api' => [
            'driver' => 'sanctum','provider' => 'admins','customer-api' => [
            'driver' => 'sanctum','provider' => 'customers','admin' => [
            'driver' => 'session','vendor' => [
            'driver' => 'session','customer' => [
            'driver' => 'session',

我所有的用户模型都包含 HasApiToken 特性，并且我已经按照文档中的规定完成了所有必要的设置。

当供应商登录时，这是运行的方法，首先我访问 sanctum 路由，然后发布登录请求，返回 $vendor 及其令牌。

            axios.get('/sanctum/csrf-cookie').then(response => { //first get call as stated in the documentations
                console.log(response)
                axios.post(this.route('api.vendors.login'),{ //then a post call to a log in the user 
                    email: this.email,password: this.password
                }).then(response => {
                    const token = response.data.token
                    axios.get(this.route('api.vendors.profile.show',1))
                        .then(async (response) => {
                            console.log(response.data,"This is the vendor from the guarded api data");
                            this.$refs.loginForm.submit(); //this actually logs the user in using the web guard setup
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                })
            });

现在，我希望登录流程会在浏览器中设置必要的令牌 cookie（我可以看到它这样做）并且对 API 的后续调用将成功，但是它返回为 未经授权

但是，当我使用例如在 Postman 中返回的令牌时，当令牌包含在标头中时，我从 API 和 axios 中得到回复，API 运行良好。基于 Sanctum cookie/session 的授权似乎不起作用。

我在 API 中的路由受到如下保护

    Route::group(['middleware' => 'auth:vendor-api'],function () {
        Route::resource('/profile','App\Http\Controllers\Api\Vendors\ProfileController',['as' => 'api.vendors']);

    });

我检查了未经授权调用的标头，可以看到包含 X_XRSF 令牌。 我的 SESSION_DRIVER 已设置为 cookie。 我的 sanctum 配置已设置为本地主机

    'stateful' => explode(',',env(
        'SANCTUM_STATEFUL_DOMAINS','localhost,localhost:3002,localhost:3000,127.0.0.1,127.0.0.1:8008,::1,' . parse_url(env('APP_URL'),PHP_URL_HOST)
    )),'middleware' => [
        'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class,'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class,

解决方法

需要在js端加上这个。

axios.defaults.withCredentials = true;

此处指定https://laravel.com/docs/8.x/sanctum#cors-and-cookies