laravel - 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',
'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 的调用将成功,但是它返回为Unauthorized
但是,当我使用例如在 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,
],
解决方案
您需要将此添加到js端。
axios.defaults.withCredentials = true;
推荐阅读
- r - 从 github 获取多个 r 脚本
- sql - 选择两个数组的元素与模式不匹配的行
- python - 模块“tensorflow.python.platform.flags”没有属性“trace”
- javascript - onClick 通过使用键迭代数据并替换为状态中的新数据来替换以前的状态项?
- apache-spark - 验证一个 pyspark Dataframe 中的行数据与另一个 Dataframe 匹配
- angular - Angular - 根据所选项目搜索数据
- javascript - 在数组中添加它们的值时删除重复项
- javascript - 是否可以根据另一个值在构造函数中设置默认值?
- vba - 将每张幻灯片保存为单独的文件
- java - 用逐帧动画制作transitionX动画会导致滞后