Перезагрузка формы аутентификации Laravel и Vue при неудачном входе - PullRequest
Новая
       20

Перезагрузка формы аутентификации Laravel и Vue при неудачном входе

1 голос
/ 22 мая 2019

Я новичок в laravel 5.8 и Vue и использую veeValidate и базовую ФОРМУ для входа в систему, имеющую:

method = "POST " action =" / login "и значения: адрес электронной почты, пароль и _token для csrf_token

и кнопка для отправки, подобная этой: 

<v-btn>@click="validate">Login</v-btn>

Когда пользователь нажимает кнопку, вызывается метод vue validate : 

  methods: {
        validate() {
            this.$validator.validateAll().then((result) => {
                if (result) {
                    //Manually submit form if not errors
                    document.getElementById("login_form").submit();
                } 
            })
        },
    }

Этот метод запускает валидатор veeValidate, а если true , то форма отправляется (POST дляпуть действия).В случае ошибки обновляется предупреждение об ошибках интерфейса (т. Е. Слишком короткие данные или пароль).

Маршрут перенаправляет запрос POST на контроллер Laravel Auth / LoginController @ login , который имеет protected $ redirectTo = '/ welcome';

$ redirectTo - это целевая страница в случае отсутствия ошибок (вход в систему).Но если валидатор терпит неудачу, он перенаправляет на страницу формы, которая перезагружается без предупреждений.

Мне нравится простой поток, но я хотел бы показать причины неудачного бэкэнда (IE: любые отзывы или попытки входа в систему);

Как получить неверный ответ LoginController @ login для отображения сообщения в компоненте vue?

1 Ответ

0 голосов
/ 22 мая 2019

Если вы хотите более настраиваемое поведение формы входа в систему, вам нужно будет выполнить Http-запрос вручную.

Для этого подключите событие отправки формы

<form v-on:submit.prevent="onFormSubmit">

  • Обратите внимание на отсутствие атрибута action или method! Вам не нужно это при использовании этого подхода.

При обработке отправки вы просто выполняете запрос Http вручную. 

methods: {
    onFormSubmit() {
        const csrfToken = document.querySelector("meta[name="_token"]").getAttribute("content");

        fetch("/login", {
            method: "POST",
            headers: new Headers({
                "Content-Type": "x-www-form-urlencoded",
                "X-XSRF-TOKEN": csrfToken
            }), 
            body: JSON.stringify(<required parameters>)
        })
           .then(res => res.json())
           .then(res => {
               if(res.ok) {
                   // Do login
               } else {
                   // Show errors
               }
            });
    }
}

В вашем бэкэнде убедитесь, что вы возвращаете код состояния 200 только после успешного завершения операции, и возвращаете код ошибки вместе с чем-то вроде свойства errors, чтобы иметь возможность считывать ошибки во внешнем интерфейсе.

Вы можете легко реализовать это в laravel, используя встроенный валидатор laravel

...