使用 Vue JS 返回'Not Authorized'的 Laravel Sanctum SPA(多身份验证)身份验证问题

Question

My 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',
            'provider' => 'admins',
        ],
        'vendor' => [
            'driver' => 'session',
            'provider' => 'vendors',
        ],
        'customer' => [
            'driver' => 'session',
            'provider' => 'customers',
        ],
    ],

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

当供应商登录时，这是运行的方法，首先我执行一个到达圣地的路由，然后执行一个登录后请求，返回$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/会话的授权似乎不起作用。

我在API中的路线受到如下保护，因此

    Route::group(['middleware' => 'auth:vendor-api'], function () {
        Route::resource('/profile', 'AppHttpControllersApiVendorsProfileController', ['as' => 'api.vendors']);
    });

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

    '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' => AppHttpMiddlewareVerifyCsrfToken::class,
        'encrypt_cookies' => AppHttpMiddlewareEncryptCookies::class,
    ],

Answer 1

您需要将其添加到js端。

axios.defaults.withCredentials = true;

如此处所述https://laravel.com/docs/8.x/sanctum#cors-和cookie