axios 我想从vue.js组件向laravel API发送密码重置请求

lsmepo6l  于 2022-11-05  发布在  iOS
关注(0)|答案(2)|浏览(134)

我正在使laravel API通过转移laravel标准密码重置功能来重置密码。
这是控制器

<?php

namespace App\Http\Controllers\Api\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ResetsPasswords;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Password;
use Illuminate\Support\Facades\Log;

class ResetPasswordController extends Controller
{
    use ResetsPasswords;

    public function __construct()
    {
        $this->middleware('guest');
    }

    public function resetPassword()
    {
        $credentials = request()->validate([
            'email' => 'required|email',
            'token' => 'required|string',
            'password' => 'required|string|confirmed'
        ]);

        $reset_password_status = Password::reset($credentials, function ($user, $password) {
            $user->password = bcrypt($password);
            $user->save();
        });

        if ($reset_password_status == Password::INVALID_TOKEN) {
            return ['success' => false];
        }

        return ['success' => true];
    }
}

和api.php

Route::post('password/reset/{token}', [ResetPasswordController::class, 'resetPassword']);

最后,查看组件代码

<template>
    <div class="l-form">
        <form v-on:submit.prevent="submit">

            <div class="p-input">
                <input id="email" type="email" class="c-input" placeholder="email" name="email" v-model="passResetRequest.email"
                       required autocomplete="email" autofocus>
            </div>

            <div class="p-input">
                <input id="password" type="password" class="c-input" placeholder="password" name="password"
                       v-model="passResetRequest.password" required autocomplete="new-password">
            </div>

            <div class="p-input">
                <input id="password-confirm" type="password" class="c-input" placeholder="password-confirm"
                       name="password_confirmation" v-model="passResetRequest.password_confirmation" required
                       autocomplete="new-password">
            </div>

            <div class="p-buttonbox">
                <button type="submit" class="c-button u-mt60">
                    reset
                </button>
            </div>
        </form>
    </div>
</template>
<script>
import axios from 'axios';

export default {
    data: function () {
        return {
            passResetRequest: {
                email: '',
                token: '',
                password: '',
                password_confirmation: ''
            }

        }
    },
    methods: {
        submit() {
            axios.post('/api/password/reset/' + this.passResetRequest)
                .then((res) => {
                    this.message = "success!";
                }).catch(error => {
            });
        },
        getToken(){
            const params = document.location.search;
            const splitedParams = params.split( '=' );
            this.passResetRequest.token = splitedParams[2];
        },

    },
    mounted() {
        this.getToken();
    }
}
</script>

然而,我试图得到响应,我得到错误消息与422错误代码。“电子邮件是必需的”“密码是必需的”“令牌是必需的”
我应该在哪里确认向API发送参数?
I确认请求对象可以获取输入的参数。

版本Laravel v8.83.23 PHP v7.4.18“axios”:“^0.21.4”,“版本”:“^2.5.17”,

7kqas0il

7kqas0il1#

在您表单中,请尝试以下操作:

<form v-on:submit.prevent="submit">
<!-- put csrf token in your form -->
           @csrf

            <div class="p-input">
                <input id="email" type="email" class="c-input" placeholder="email" name="email" v-model="passResetRequest.email"
                       required autocomplete="email" autofocus>
            </div>

            <div class="p-input">
                <input id="password" type="password" class="c-input" placeholder="password" name="password"
                       v-model="passResetRequest.password" required autocomplete="new-password">
            </div>

            <div class="p-input">
                <input id="password-confirm" type="password" class="c-input" placeholder="password-confirm"
                       name="password_confirmation" v-model="passResetRequest.password_confirmation" required
                       autocomplete="new-password">
            </div>

            <div class="p-buttonbox">
                <button type="submit" class="c-button u-mt60">
                    reset
                </button>
            </div>
        </form>
5t7ly7z5

5t7ly7z52#

我发现一个美妙的laravel API重置密码https://github.com/webdevmatics/laravel8api/blob/main/app/Http/Controllers/Api/NewPasswordController.php
我指的是这一点,并更改了控制器

<?php

namespace App\Http\Controllers\Api\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ResetsPasswords;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Password;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;
use Illuminate\Auth\Events\PasswordReset;

class ResetPasswordController extends Controller
{
    use ResetsPasswords;

    public function __construct()
    {
        $this->middleware('guest');
    }

    public function resetPassword(Request $request)
    {
        $request->validate([
            'token' => 'required',
            'email' => 'required|email',
            'password' => ['required', 'confirmed'],
        ]);

        $status = Password::reset(
            $request->only('email', 'password', 'password_confirmation', 'token'),
            function ($user) use ($request) {
                $user->forceFill([
                    'password' => Hash::make($request->password),
                    'remember_token' => Str::random(60),
                ])->save();

                $user->tokens()->delete();

                event(new PasswordReset($user));
            }
        );

        if ($status == Password::PASSWORD_RESET) {
            return response([
                'message'=> 'Password reset successfully'
            ]);
        }

        return response([
            'message'=> __($status)
        ], 500);

    }
}

和api.php

Route::post('password/reset', [ResetPasswordController::class, 'resetPassword']);

和vue组件脚本

<script>
import axios from 'axios';

export default {
    data: function () {
        return {
            passResetRequest: {
                email: '',
                token: '',
                password: '',
                password_confirmation: ''
            }

        }
    },
    methods: {
        submit() {
            axios.post('/api/password/reset' , this.passResetRequest)
                .then((res) => {
                    this.message = "success!";
                }).catch(error => {
                console.log(error.response);
            });
        },
        getToken() {
            const params = document.location.search;
            const splitedParams = params.split('=');
            this.passResetRequest.token = splitedParams[2];
        },

    },
    mounted() {
        this.getToken();
    }
}
</script>

相关问题