Nuxt auth 模块 axios 未根据请求设置 CSRF 令牌答案

【问题标题】：Nuxt auth module axios not setting CSRF token on requestNuxt auth 模块 axios 未根据请求设置 CSRF 令牌
【发布时间】：2021-12-20 14:50:32
【问题描述】：

我正在使用 Nuxt 身份验证模块 v5 和 Laravel sanctum 提供程序。我的 csrf-cookie 路由工作正常，我的登录路由工作正常，但是当尝试从函数调用 this.$axios 时，例如创建用户帐户时（因为 auth 模块不提供此功能）我得到一个 CSRF令牌不匹配。

看起来像这样直接使用 axios 没有权限设置 cookie，因为没有用户登录，我怎样才能设置 cookie？

账户创建方法

/*
** Create accounr
*/
createAccount () {
  this.feedback.isShown = false
  this.isCreatingAccount = true

  if (this.apiAccountCreationSource) this.apiAccountCreationSource.cancel('aborted')
  const CancelToken = this.$axios.CancelToken
  this.apiAccountCreationSource = CancelToken.source()

  this.$axios.post(`${this.$config.apiUrl}/api/account`, this.account, {
    cancelToken: this.apiAccountCreationSource.token,
    timeout: 30 * 1000
  }).then(res => {
    this.apiAccountCreationSource = null
    this.setContextualResponse(res)
    setTimeout(() => {
      this.login()
    }, 250)
  }).catch(err => {
    this.setContextualResponse(err.response ? err.response.data : null)
  }).finally(() => {
    this.isCreatingAccount = false
  })
},

Nuxt 配置

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
  credentials: true,
  baseURL: process.env.API_DOMAIN
},

// Auth module configuration: https://auth.nuxtjs.org/
auth: {
  redirect: {
    login: '/account/login/',
    logout: '/account/login/',
    callback: '/account/login/',
    home: '/account/dashboard/'
  },
  strategies: {
    'laravelSanctum': {
      provider: 'laravel/sanctum',
      url: process.env.API_DOMAIN,
      endpoints: {
        login: { url: '/api/login', method: 'post' },
        logout: { url: '/api/account/logout', method: 'post' },
        user: { url: '/api/account', method: 'get', propertyName: 'user' }
      }
    }
  }
},

【问题讨论】：

标签： vue.js axios nuxt.js laravel-sanctum

【解决方案1】：

如果您需要获取 CSRF 令牌，您只需向令牌端点发出请求，您的浏览器应保存 XSRF 令牌。然后 axios 会在每个后续请求中自动发送这个令牌。

所以您需要做的就是在发送 POST 请求之前向您的 csrf-cookie 路由发出 axios GET 请求。

this.$axios.get(`${this.$config.apiUrl}/sanctum/csrf-cookie`)

或者你可以像这样链接两个请求：

this.$axios.get(`${this.$config.apiUrl}/sanctum/csrf-cookie`).then(() => {
   return this.$axios.post(`${this.$config.apiUrl}/api/account`, this.account, {
      cancelToken: this.apiAccountCreationSource.token,
      timeout: 30 * 1000
    }).then((res) => {
      this.apiAccountCreationSource = null
      this.setContextualResponse(res)
      setTimeout(() => {
        this.login()
      }, 250)
    }).catch((err) => {
      this.setContextualResponse(err.response ? err.response.data : null)
    }).finally(() => {
      this.isCreatingAccount = false
    })
  })

您的身份验证策略可以轻松运行，因为它会在内部处理此 csrf 请求 (https://github.com/nuxt-community/auth-module/blob/dev/src/providers/laravel-sanctum.ts)

参考资料：

https://laravel.com/docs/8.x/sanctum#csrf-protection

https://github.com/axios/axios/issues/708#issuecomment-280920224

【讨论】：