带Vue和护照的Laravel

我有一个项目，在那里我安装了passport和vue与laravel。我有我的auth端点，但现在我正努力让这些端点与我的项目前端一起工作

因此，当我安装Laravel时，我使用php artisan ui vue--auth来生成登录/注册脚手架

api端点位于文件api.php中

这是我的AuthController.php代码的一部分：

    public function login(ApiLoginRequest $request){
    //debug
        //return $request;
    $credentials = $request->only(['email', 'password']);
    $authAttempt = auth()->attempt($credentials);
    if(!$authAttempt){
        return response([
            'error'   => 'Access forbidden',
            'message' => 'Please check your email and password'
        ], 403 );
    }
    //debug result needs to be true
        // return response([
        //     'debug response' => $authAttempt
        // ]);
    $http = new Client();
    $response = $http->post( 'http://laravel-xyzhub.test/oauth/token', [
        'form_params' => [
            'grant_type' => 'password',
            'client_id' => $this->CLIENT_ID,
            'client_secret' => $this->CLIENT_SECRET,
            'username' => $request->email,
            'password' => $request->password,
            'scope' => ''
        ]
    ]);
    return json_decode((string) $response->getBody(), true );
}

vue模板的代码：

<template>

<div class="mx-aut h-full flex justify-center items-center bg-gray-800">
    <div class="w-96 bg-green-400 rounded-lg shadow-xl p-6" >

        <div class="text-center text-white uppercase">
            <h1 class="font-extrabold text-6xl">XYZ HUB</h1>

            <h1 class="text-3xl pt-8">Welcome Back</h1>
            <h2 class="pb-8 text-xs">Enter your credentials below</h2>
        </div>

        <!-- form -->
        <form class="pb-8" @submit.prevent="postNow" ref="LoginForm" method="post">

            <div class="relative">
                <label for="email" class="uppercase text-green-400 font-bold absolute pl-3 pt-2">Email</label>

                <div class="">
                    <input id="email" type="email" class="pt-8 w-full rounded p-3 text-green-700" name="email" v-model="credentials.email" autocomplete="email" autofocus placeholder="your@email.com">
                </div>
            </div>

            <div class="relative pt-6">
                <label for="password" class="uppercase text-green-400 font-bold absolute pl-3 pt-2">Password</label>

                <div class="">
                    <input id="password" type="password" class="pt-8 w-full rounded p-3 text-green-700" name="password" v-model="credentials.password" placeholder="password">
                </div>
            </div>

            <div class="pt-8">
                <button type="submit" class="uppercase font-bold rounded w-full bg-white text-green-400 py-2 px-3 text-2xl" v-on:click="loginUser">Login</button>
            </div>

            <div class="flex justify-center pt-8 text-white uppercase font-semibold text-sm">
                <a :href="recover"> Forget Password </a>
            </div>

            <div class="flex justify-center pt-2 text-white uppercase font-semibold text-sm">
                <a :href="register"> Register </a>
            </div>

        </form>

    </div>
</div>

XYZ集线器
欢迎回来
在下面输入您的凭据
电子邮件
密码
登录

导出默认值{
数据（）{
返回{
证书：{
电子邮件：“”，
密码：“”
}
}
},
方法：{
postNow（事件）{
log（“事件”{event，$form:this.$refs.LoginForm}）；
axios.post（'/api/login'，this.credentials）
。然后（响应=>{
console.log（'response'，response.data）；router.push（“/register”）；
})
.catch（错误=>{
console.log（“错误”，error.response）；
})
}
} 
}

我知道模板中的代码不正确，只是不确定我做错了什么。。。任何帮助都将不胜感激。提前谢谢

更新： 因此，如果我删除表单中的prevent，并在响应通过后添加重定向，那么我的提交将突然无法通过

 <form class="pb-8" @submit.prevent="postNow" ref="LoginForm" method="post">

换成

 <form class="pb-8" @submit="postNow" ref="LoginForm" method="post">

正如您所注意到的，我的端点突然也不正确

---

真的很困惑这一切…

您注意到端点是错误的。

因此：

axios.post('/login' , this.credentials)

改为

axios.post('/api/login' , this.credentials)

错误可能是由于路由“/login”中缺少csrf令牌字段
使用api路由，您不需要csrf。

另外，更容易记录错误响应，例如

.catch( error => {
   console.log(error.response);
})

---

您注意到端点是错误的。

因此：

axios.post('/login' , this.credentials)

改为

axios.post('/api/login' , this.credentials)

错误可能是由于路由“/login”中缺少csrf令牌字段
使用api路由，您不需要csrf。

另外，更容易记录错误响应，例如

.catch( error => {
   console.log(error.response);
})

---

您正在将

凭据

对象发送到您的

登录

路径，但似乎没有在Vue模板中使用

凭据？@DelenaMalan mmm您是对的。如何在我的vue模板中使用凭据（vue是新的，所以我会边学边用）…在
v-model
属性中，您可以使用
credentials.email
和
credentials.password
而不仅仅是
email
和
password
@delenamal谢谢。让它工作起来。你把
凭证
对象发送到你的
登录
路径，但似乎没有在你的Vue模板中使用
凭证
？@DelenaMalan mmm你说得对。如何在我的vue模板中使用凭据（vue是新的，所以我会边学边用）…在
v-model
属性中，您可以使用
credentials.email
和
credentials.password
而不仅仅是
email
和
password
@delenamal谢谢。让它工作起来。到头来真蠢