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

【问题标题】：Problem with Laravel Sanctum SPA (multi auth) Authentication with Vue JS returning 'Not Authorized'Vue JS 返回“未授权”的 Laravel Sanctum SPA（多身份验证）身份验证问题
【发布时间】：2021-07-22 04:34:36
【问题描述】：

我的 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 特征，并且我已按照文档中的规定完成了所有必要的设置。

当供应商登录时，这是运行的方法，首先我执行到 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/会话的授权不起作用。

我在 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。我的圣所配置已设置为本地主机

    '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,
    ],

【问题讨论】：

标签： laravel laravel-sanctum

【解决方案1】：

你需要把这个添加到js端。

axios.defaults.withCredentials = true;

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

【讨论】：