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

Question

I'm using the Nuxt auth module v5 and the Laravel sanctum provider. My csrf-cookie route works fine, and my login route works fine, but when trying to call this.$axios from a function, such as when creating a user's account (since auth module doesn't offer this) I'm getting a CSRF token mismatch.

It would appear that using axios directly like this doesn't have access to setting the cookie since no user logged in, how can I get the cookie to be set?

Method for account creation

/*
** 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 config

// 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' }
      }
    }
  }
},

Answer 1

If you need to get the CSRF token all you need to do is make a request to your token endpoint and your browser should save the XSRF token. Then axios will automatically send this token in every subsequent request.

So all that you need to do is make a axios GET request to your csrf-cookie route before you send your POST request.

Simply make a request to set the XSRF token before making a POST:

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

Or you can chain both requests doing something like this:

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
    })
  })

Notice how we're sending a GET request to the csrf route before the POST request.

Your authentication strategy works without this hassle because it handles this csrf request internally ( https://github.com/nuxt-community/auth-module/blob/dev/src/providers/laravel-sanctum.ts )

References:

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

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