Laravel normal login with vuejs using axios returns error Request failed with status code 422

Question

Am trying to use laravel and vue js with axios

Previously this was my login form

<form name="login-form" method="POST" action="{{ route('login') }}">
 //username and password fields

</form>

Which works perfectly one can login

Now i would like to use vuejs in a similar way without making my app a single page app

so i have resulted to making a login component

 <template>
  <form name="login-form">
    <input type="email" v-model="email" class="form-control" autofocus>
    <input id="password" type="password" v-model="password"  required>

     <button type="submit"
             class="btn btn-dark btn-sm"
             @click.prevent="login" 
            :disabled="disableform">
            {{submitted?"Logging you in .....":"Login"}}
     </button>

  </form>
 </template>

Now script part

  <script>

    export default {
      data: () => ({
         email :'', password:'', remeberme:true, submitted:false
      }),
    methods: {
    login() {
     //do other stuff like disabling buttons...etc
     axios.post("/login", {email:this.email, password:this.password})
        .then(
            (res)=>{

              ///showing sweet alert then 
              // settimout for 3 sec the 
            window.location.href="/dashboard";
            },
            (err)=>{
             //show sweet alert of failed login
            }
        )
},

}

Now whenever i make the login post request an getting an error

Request failed with status code 422

I would like to proceed with the laravel vuejs workflow(with authentication sessions) but not an api jwt token request format.

What could be wrong or is this possible?

Yes in my bootstrap.js its already set even checking on the developer tools i can see it as X-CSRF-TOKEN:Gok4MlG3zgp95ic2tkDntQy9nOHTUsJoWE4PnXsh — Geoff
– Geoff, Commented Sep 25, 2017 at 15:59
let token = document.head.querySelector('meta[name="csrf-token"]'); window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; — Geoff
– Geoff, Commented Sep 25, 2017 at 16:00

Ikram Ud Daula · Accepted Answer · 2018-05-09 13:50:18Z

1

It's a validation error. check you laravel controller regarding post/put function.

Request failed with status code 422

When laravel fail the validation then it appears.

answered May 9, 2018 at 13:50

Ikram Ud Daula

1,33116 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Armin · Accepted Answer · 2019-09-02 05:31:29Z

0

You need to use a csrf_field in your form, like this:

<input type="hidden" name="_token" :value="csrfToken">

And define it in your script:

data() {
   return {
      csrfToken: ''
   } 
},
created() {
       this.csrfToken = document.querySelector('meta[name="csrf-token"]').content;
}

answered Sep 2, 2019 at 5:31

Armin

2,1712 gold badges21 silver badges18 bronze badges

Collectives™ on Stack Overflow

Laravel normal login with vuejs using axios returns error Request failed with status code 422

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related