带有 laravel sanctum 的 Nuxt 收到“未验证”消息

Posted 2023-02-22

【中文标题】带有 laravel sanctum 的 Nuxt 收到“未验证”消息

【英文标题】：Nuxt with laravel sanctum recieve "Unauthenticated" message

【发布时间】：2020-10-10 09:51:25

【问题描述】：

我正在尝试将 Laravel sanctum 与 NuxtJS 一起使用。问题是我能够通过 get csrf 并登录，但是当我尝试访问 api/user 时，我收到“未经授权”的消息。他们说我应该将 SESSION_DRIVER 设置为 cookie，但它仍然是一样的。我正在使用 xampp，所以我在 localhost:8000 上运行 laravel，在 localhost:3000 上运行 nuxtjs。提前致谢。

Laravel API

.env

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost

配置/cors

'paths' => [
    'api/*',
    '/login',
    '/logout',
    '/sanctum/csrf-cookie'
],
'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

api.php

Route::middleware('auth:sanctum')->get('/user', function (Request $request) 
   return $request->user();
);

NUXT JS

nuxt.config.js

axios: 
     baseURL: "http://localhost:8000/",
     credentials: true
,
auth: 
   redirect: 
       login: '/login',
       logout: '/',
       callback: '/login',
       home: '/'
   ,
   strategies: 
          local: 
             endpoints: 
                login:  url: '/login', method: 'post', propertyName: false ,
                user:  url: '/api/user', method: 'get', propertyName: false 
             ,
             tokenRequired: false,
             tokenType: false
          
   ,
   localStorage: false
,

Login.vue

export default 
data()
    return
        email:'',
        password:''
    
,
components: 

,
methods:
    login()
        this.$axios.get('/sanctum/csrf-cookie', 
            headers: 
                'X-Requested-With': 'XMLHttpRequest'
            ,
            withCredentials: true,
        )
        .then( function()
            this.$auth.loginWith('local', 
                data: 
                    email: this.email,
                    password: this.password
                ,
            );
        .bind(this))
    
,
mounted()  


</script>

【问题讨论】：

github.com/laravel/sanctum/issues/41

为了使其正常工作，SPA 需要在请求标头 X-XSRF-TOKEN 下发回 XSRF-TOKEN cookie 的值，目前此处似乎没有记录，但这就是 Laravel 解析加密 CSRF cookie 的方式。

像上面的中间件一样从 cookie 标头中读取令牌并不能防止 CSRF，因为无论请求来自何处，该 cookie 都会随请求一起发送，完全违背了 CSRF 保护的目的。

@AjayKadoula 是的，我以前读过。但我认为我已经正确配置 axios 以通过设置凭据来发送带有 csrf 令牌的请求：在 nuxt.config.js 中为 true .. 那么我做错了什么？

这不是同一个来源意味着这两个域的前后有不同的端口。这个答案可能会有所帮助：***.com/a/62417776/7908390

【参考方案1】：

在 nuxt.config.js 中， 像这样检查本地服务器端口：

  auth: 
    strategies: 
      'laravelSanctum': 
       provider: 'laravel/sanctum',
       url: 'http://localhost:8000'
       ,
    ,
  ,

  axios: 
    baseURL: 'http://localhost:8000',
    credentials: true
  ,

如果为真：

在 .env 文件中检查：

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000

然后检查你的 laravel kernel.php 文件，如果不存在则添加这个类：

'api' => [
        EnsureFrontendRequestsAreStateful::class,
 ]