Page is not Inertia rendered after login using vuejs and laravel

Question

i am using laravel project with vuejs and inertiajs. i want to make user login and after login i want the user to redirect to test.vue file, which i created just for learning. i made a registration form after submit registration form i call a function login, i.e i want the same user to login, who registered. my set login function is working properly, but failed to redirect to vue page using inertia render.

RegistrationForm.vue


     SubmitRegistration(){
                       this.$v.$touch();
                       if (this.$v.$invalid) return;
                        axios.post('submitRegistrationForm',this.form)
                        .catch(({ response }) => {
                            this.$toast.error(response.data.message, 'error', {timeout:3000});
                        }).then(({ data }) => {
                            this.setLogin();
                        });
                    },
                    setLogin(){
                      const data = {
                            email: this.form.email,
                            password: this.form.password
                        }
                        axios.post('loggedInUser',data)
                        .catch(({ response }) => {
                            this.$toast.error(response.data.message,'error', {timeout: 3000});
                        });
                },

web.php


    Auth::routes();
    Route::post('loggedInUser',[FrontEndController::class,'authenticate'])->name('login.attempt');

FrontEndController.php

 

    public function authenticate(Request $request)
        {
            $credentials = $request->only('email', 'password');
    
            if (Auth::attempt($credentials)) {
                return Inertia::render('Layouts/Test');
            }
        }

test.vue


    <template>
        <h1>
        Hello
        </h1>
    </template>

Amade · Accepted Answer · 2020-12-02 15:46:40Z

1

Try to make a visit to the loggedInUser using this.$inertia.post(url, data) instead of the axios call. That is, do:

setLogin() {
    const data = {
        email: this.form.email,
        password: this.form.password
    }
    this.$inertia.post(url, data);
};

instead of:

setLogin() {
    const data = {
        email: this.form.email,
        password: this.form.password
    }
    axios.post('loggedInUser',data)
        .catch(({ response }) => {
            this.$toast.error(response.data.message,'error', {timeout: 3000});
        });
}

answered Dec 2, 2020 at 15:46

Amade

4,0182 gold badges30 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Page is not Inertia rendered after login using vuejs and laravel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related