Question

我有一个vuejs组件用作我的登录表单，我试图通过Laravel控制器传递该表单，类似于在blade.php <from method="POST" action="login">和web.php {{ 1}}。

Route::post('/login', 'LoginController@login')应该简单地重定向到新视图（测试）的地方：

LoginController

问题在于，尽管确实提交了表单并在控制器中传递了表单，但整个home.blade.php html却作为响应数据而不是作为新的“ home.blade.php”视图重新加载。 >

这是vuejs登录组件：

class LoginController extends Controller {

    public function login() {
        
        return view( 'home' )
    }
}

我只是简单地调用login.blade.php：

<template>
        <div id="form-input">
            <form method="POST" @submit.prevent="login" :class="{ 'disable-interaction' : submitted }">
                <input class="single-line-input" placeholder="Email" type="text" name="email" v-model="form.email">
                <input class="single-line-input space" placeholder="Password" type="password" name="password" v-model="form.password">
                <div class="large bottom">
                    <p v-if="error" class="error large">{{ error }}</p>
                    <button class="large btn-important" type="submit">sign in</button>
                    <a class="large btn-important-inverted" href="register">register</a>
                    <a class="simple-link center" v-bind:href="back">back</a>
                </div>
            </form>
        </div>
</template>

<script>
    export default {
        props: {
            error: String,
            back: String
        },

        data: function() {
            return {
                submitted: false,
                form: {
                    email: '',
                    password: ''
                }
            }
        },

        methods: {
            login: function() {
                this.submitted = true;
                axios.post('login', this.form)
                    .then(res => console.log(this.form))
                    .catch(err => console.log(err));
                this.submitted = false;
            }
        }
    }
</script>

在我的@extends('layouts.auth') @section('form') <login-form error="{{ isset($error) }}" back="{{ url('home') }}" ></login-form> @endsection中：

web.php

Answer 1

您必须注意自己在应用程序中的位置上所做的事情。

永远不要在POST调用的控制器方法内渲染视图。 POST表示您只会对数据做些操作，通常会将用户重定向到其他GET路由（即仪表板）

在您的情况下，在login()函数中应该做的只是使用随axios请求发送的数据对用户进行身份验证。 login()函数将自动接受Request $request参数，因为它是POST请求。

您可以通过执行$credentials = $request->only(['email', 'password']);从请求中获取电子邮件和密码，然后使用Laravel的Auth外观通过Auth::attempt($credentials);对用户进行身份验证。进一步了解Laravel Auth here。

基于Auth::attempt()的返回值，并且如果身份验证成功与否，您应该将JSON响应返回给您的vue应用。阅读如何进行here。

从那里，以then()方法捕获响应时，您将读取响应并查看身份验证是否成功。根据结果，相应地重定向您的应用。 Here是在vue应用中进行重定向的方法。

如果您计划将整个应用程序安装在Vue中，则可以考虑构建Vue SPA（单页应用程序）并使用Vue-Router代替Laravel的路由和刀片组件。

Answer 2

问题是，尽管表单确实提交并传递了控制器，整个home.blade.php html都以响应数据，而不是新的“ home.blade.php”视图。

是的，因为您没有执行任何逻辑，所以您只是返回一个视图。

public function login()
{
    // thanks for submitting the form, have a view
    return view('home');
}

先验证您的User，然后再验证redirect，如果验证成功，则返回验证失败消息。

public function login()
{
    // authenticate user
    if ($auth->fails()) {
        return response()->json(['success' => false, 'errors' => []], 401);
    }

    return redirect(route('home'));
}

您的home路线将执行您的GET login路线当前所做的，仅return view('home');

如何使用Vuejs提交表单以使用Laravel Controller

2 个答案: