Недавно многие фронт-студенты жаловались на то, что они не могут записать свою учетную запись, даже если они войдут в форму входа в систему. Это все еще является общей проблемой для одностраничных приложений и веб-страниц, которые используют больше AJAX.
UserApp - это веб -приложение, созданное с использованием AngularJS, но он не смог поддержать функцию «Сохранить пароль» браузера.
Вот некоторые проблемы, найденные:
Форма не может быть динамически вставлена в DOM с помощью JS.
Форма должна фактически выдать запрос поста. (Не может получить контент формы, а затем сделать запрос с Ajax)
Когда браузер автоматически заполняется в форме, $ Scope не может получить обновленные данные.
Firefox относительно прост. Пока элемент формы имеет атрибут имени, после запуска события подачи, он автоматически напомнит пользователю, следует ли записывать данные.
Кода -копия выглядит следующим образом:
<form name = "login-form" ng-submit = "login ()">
<input id = "login" name = "login" type = "text" ng-model = "user.login">
<input id = "password" name = "password" type = "password" ng-model = "user.password">
</form>
Требование Firefox для записи данных относительно просто
Но у Firefox есть проблема. После того, как форма будет автоматически заполнена, данные в $ Scope не будут обновлены. Поэтому я погуглил и нашел несколько хаков для этой проблемы. Но я всегда чувствую, что эти решения ненужны, потому что все, что мне нужно,-это взять с собой данные при подаче формы, а не какую-то очень легкомысленную двустороннюю технологию связывания данных. Поэтому я использовал очень простой метод: Получите значение элемента формы при отправке формы.
Кода -копия выглядит следующим образом:
$ scope.login = function () {
$ scope.user = {
Вход в систему: $ ("#login"). val (),
пароль: $ ("#пароль"). val ()
};
...
вернуть ложь;
};
Хорошо, сейчас нет проблем с Firefox, но что мне делать с Chrome?
Chrome только побудит пользователя, чтобы хранить пароль, когда форма формы фактически инициирует запрос POST, но таким образом, он не может работать с AJAX.
Вот решение:
Когда форма делает запрос на сообщение, перехватите его с NG-Submit, верните False, чтобы заблокировать его и отправьте данные с AJAX.
Когда Ajax успешно возвращается, храните сеанс в файлах cookie и повторно подать форму.
Когда страница будет перезагружена, вы обнаружите, что она была сертифицирована и перенаправляет ее на домашнюю страницу.
Это будет обновлять страницу один раз, но ее нужно обновить только при входе в систему. Просто убедитесь, что страница возвращается по одному и тому же адресу.
Но если форма динамически добавлена в DOM, этот метод все еще не работает. Решение состоит в том, чтобы добавить скрытую форму в index.html. Когда вам необходимо отправить данные, скопируйте данные, принесенные другими формами в скрытую форму.
Я упаковал его в директиву:
Кода -копия выглядит следующим образом:
app.directive ("ngloginsubmit", function () {
возвращаться {
ограничить: "a",
объем: {
onsubmit: "= ngloginsubmit"
},
Ссылка: функция (сфера, элемент, атрис) {
$ (element) [0] .Onsubmit = function () {
$ ("#login-login"). val ($ ("#login", element) .val ());
$ ("#login-password"). val ($ ("#пароль", элемент) .val ());
scope.onsubmit (function () {
$ ("#login-form") [0] .submit ();
});
вернуть ложь;
};
}
};
});
Форма скрыта в index.html:
Кода -копия выглядит следующим образом:
<form name = "login-form" id = "login-form" method = "post" action = "" style = "display: none;">
<input name = "login" id = "login-login" type = "text">
<input name = "пароль" id = "login-password" type = "пароль">
</form>
Временная форма входа в систему
Кода -копия выглядит следующим образом:
<form name = "login-form" autocomplete = "on" ng-login-submit = "login">
<input id = "login" name = "login" type = "text" autocomplete = "on">
<input id = "password" name = "password" type = "пароль" autocomplete = "on">
</form>
Контроллер для входа в систему:
Кода -копия выглядит следующим образом:
$ scope.login = function (отправить) {
$ scope.user = {
Вход в систему: $ ("#login"). val (),
пароль: $ ("#пароль"). val ()
};
функция ajaxcallback () {
представлять на рассмотрение();
}
вернуть ложь;
};
При освещении он заставит заставлять, чтобы повторно подать форму
Теперь эта проблема решена, но всякий раз, когда вы нажимаете на F5, браузер напоминает вам, следует ли повторно повторно. Это действительно немного чертовски, поэтому я добавил файл pre-login.html, и скрытая форма подчиняет его, а затем перенаправляет на index.html.
Теперь это нормально ~