Question

我是laravel 5.8和Vue的新用户，我使用veeValidate和一个基本的FORM登录，具有：

方法 =“ POST” 操作 =“ /登录”和值：csrf_token的电子邮件，密码和_token

和一个用于提交的按钮：

<v-btn>@click="validate">Login</v-btn>

当用户单击按钮时，将调用vue方法 validate ：

  methods: {
        validate() {
            this.$validator.validateAll().then((result) => {
                if (result) {
                    //Manually submit form if not errors
                    document.getElementById("login_form").submit();
                } 
            })
        },
    }

此方法运行veeValidate验证程序，如果 true ，则提交表单（将其提交到操作路径）。如果出现错误，它将更新前端错误警报（即丢失数据或密码太短）。

路由将POST请求重定向到Laravel的控制器 Auth / LoginController @ login ，该控制器具有受保护 $ redirectTo ='/ welcome' ;

$ redirectTo是没有错误的登录页面（登录）。但是，如果验证程序失败，它将重定向到没有警告的重新加载的表单页面。

我喜欢简单的流程，但是我想展示后端失败的原因（即：任何反馈或登录尝试）；

如何获得LoginController @ login错误的响应以向vue组件显示消息？

Answer 1

如果您想要更自定义的登录表单提交行为，则需要手动执行Http请求。

要做的就是将其提交到表单提交事件中

<form v-on:submit.prevent="onFormSubmit">

请注意，缺少action或method属性！使用这种方法时，您不需要此。

在处理提交时，您只需手动执行Http请求即可。

methods: {
    onFormSubmit() {
        const csrfToken = document.querySelector("meta[name="_token"]").getAttribute("content");

        fetch("/login", {
            method: "POST",
            headers: new Headers({
                "Content-Type": "x-www-form-urlencoded",
                "X-XSRF-TOKEN": csrfToken
            }), 
            body: JSON.stringify(<required parameters>)
        })
           .then(res => res.json())
           .then(res => {
               if(res.ok) {
                   // Do login
               } else {
                   // Show errors
               }
            });
    }
}

请确保您的后端仅在操作成功时返回200状态代码，并返回错误代码以及类似errors属性的内容，以便能够在前端读取错误。

您可以通过使用laravel验证器中的构建轻松地在laravel中实现此功能

登录失败后会重新加载Laravel和Vue身份验证表单

1 个答案: