使用 sanctum 的 SPA 身份验证失败，并显示以下错误消息：“未经身份验证”。答案

【问题标题】：SPA authentication using sanctum failed with this error message: "Unauthenticated."使用 sanctum 的 SPA 身份验证失败，并显示以下错误消息：“未经身份验证”。
【发布时间】：2021-06-16 23:34:18
【问题描述】：

我正在使用 Vuejs 和 Laravel 构建 SPA，我安装了 laravel sanctum 以通过其令牌对用户进行身份验证。

API.php

Route::post('/teacher/login', 'Teacher\RegisterController@login')->middleware('auth:sanctum');

login(){
            axios.get('/sanctum/csrf-cookie').then(response => {
                this.form.post('api/teacher/login')
                .then( response => {
                    console.log( response );
                })
                .catch( error => {
                    console.log( error );
                })
            });
        }

自定义控制器

public function login(Request $request){

$credentials = $request->only('email', 'password');

        if(Auth::attempt($credentials)){
            return response()->json(Auth::user(), 200);
        }
}

我在没有 sanctum 中间件的情况下检查了它，它成功地记录了用户，但我在它说您的请求未经身份验证的路由中添加了中间件。我按照官方的 Laravel-7 文档实现了一切，我不明白为什么它说未经身份验证，附上 IMG 以获得更多详细信息。

【问题讨论】：

你能分享csrf-cookie的回复吗？还有所有 cookie 的列表？
好的，我附上了应用程序cookie截图，请看一下。
@Harun R Rayhan 有什么问题吗？

标签： laravel vue.js axios single-page-application laravel-sanctum

【解决方案1】：

确保您从 csrf-cookie 获得的 X-CSRF-TOKEN 或 X-XSRF-TOKEN 附加到 HTTP 请求标头到 api/teacher/login。对于 Axios，你可以设置它

axios.defaults.headers.common['X-XSRF-TOKEN'] = <the x-xsrf-token from csrf-cookie request>

确保在.env 中声明SANCTUM_STATEFUL_DOMAINS 并带有端口号。您也可以包含多个域。 SANCTUM_STATEFUL_DOMAINS='your-domain.test:8080,localhost:8000'

没有这个你会遇到Session store not set问题，因为中间件EnsureFrontendRequestsAreStateful正在检查请求是否来自前端。如果是来自前端，那么它会附加以下中间件到它

加密Cookies
开始会话
验证CsrfToken

【讨论】：

我在 bootstrap.js 中全局添加了这一行 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';还添加了有状态域，但它不起作用
X-Requested-With 用于 CORS 请求检查，因此您仍然需要设置 X-XSRF-TOKEN，它将在您随后提出的每个请求中发送，以满足 Laravel 的 CSRF 要求
你能再解释一下吗，我该如何解决这个问题。