Question

我的 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/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,
    ],

Answer 1

需要在js端加上这个。

axios.defaults.withCredentials = true;

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

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

1 个答案: