Question

我试图使用带有axios的laravel和vue js

以前这是我的登录表单

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

</form>

完全可以登录

现在我想以类似的方式使用vuejs而不使我的应用程序成为单页应用程序

所以我最终制作了一个登录组件

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

现在编写脚本部分

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

}

现在每当我发出登录帖子请求时都会收到错误

Request failed with status code 422

我想继续使用laravel vuejs工作流程（使用身份验证会话），但不是api jwt令牌请求格式。

可能出现什么问题或可能出现这种情况？

Answer 1

这是验证错误。检查关于后置/放置功能的laravel控制器。

Request failed with status code 422

当laravel验证失败时，它会出现。

Answer 2

您需要在表单中使用csrf_field，如下所示：

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

并在脚本中定义它：

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

Laravel使用axios使用vuejs正常登录返回错误请求失败，状态码为422

2 个答案: