lundi 15 octobre 2018

Form is not displaying when using csrf token

My problem is, when onclick function in Header.vue is clicked I'm getting this error but when I delete the input tag with csrf_token from form of Register.vue, then the register form is showing as it is supposed to.

Although after submitting the inputs by POST I'm left with standard 419 (Sorry, your session has expired. Please refresh and try again.) laravel screen.

I'm sure the 419 screen is caused by lack of csrf token so my final question is how do I implement it in vue.js?

I'm using Vue.js and Laravel to create a SPA, in my Register.vue component which renders onclick on top of the site I've added csrf token as follows:

<template> <form id="registerForm" class="register-container" action="registerUser" method="post"> <input type="hidden" name="_token" value=""> <div class="register-container__form"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" name="email" type="text"> <label class="mdl-textfield__label">Email</label> </div> . . . </template>

The onclick function which pops up the registration form is in Header.vue:

<template>
.
.
.
    <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="" v-on:click.prevent="registerPopUp()">Sign In</a>
    </nav>

        <register-form/>
</template>

<script>

        import Register from './Register.vue'

        export default {
                components: {
                        'register-form': Register
                },
                methods: {
                        registerPopUp: () => {
                                let loginForm = document.getElementById('loginForm');
                                let registerForm = document.getElementById('registerForm');
                                loginForm.style.display = "none";
                                registerForm.style.display = "block";

                                window.onclick = (e) => {
                                        if(e.target == registerForm)
                                                registerForm.style.display = "none";
                                }
                        }
                }
        }
</script>


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire