Recentemente, muitos estudantes de front-end reclamaram que não podem registrar sua conta, mesmo que efetuem login no formulário de login. Este ainda é um problema comum para aplicativos de página única e páginas da Web que usam mais Ajax.
O UserApp é um WebApp criado usando o AngularJS, mas não conseguiu oferecer suporte ao recurso "Salvar senha" do navegador.
Aqui estão alguns problemas encontrados:
O formulário não pode ser inserido dinamicamente no DOM usando JS.
O formulário deve realmente emitir uma solicitação de postagem. (Não é possível obter o conteúdo do formulário e depois fazer uma solicitação com o Ajax)
Quando o navegador preenche automaticamente o formulário, o $ SCOPE não pode obter os dados atualizados.
O Firefox é relativamente simples. Enquanto o elemento do formulário tiver um atributo de nome, depois de acionar o evento de envio, ele lembrará automaticamente o usuário se deve gravar os dados.
A cópia do código é a seguinte:
<name de forma = "login-form" ng-submit = "login ()">
<input id = "login" name = "login" type = "text" ng-model = "user.login">
<input id = "senha" name = "senha" tipo = "senha" ng-model = "user.password">
</morm>
O requisito para o Firefox registrar dados é relativamente simples
Mas o Firefox tem um problema. Depois que o formulário for preenchido automaticamente, os dados no $ SCOPE não serão atualizados. Então, pesquisei e encontrei alguns hacks para esse problema. Mas sempre sinto que essas soluções são desnecessárias, porque tudo o que preciso é trazer os dados comigo ao enviar o formulário, em vez de alguns dados muito frívolos de tecnologia de ligação bidirecional. Por isso, usei um método muito simples: obtenha o valor do elemento de formulário ao enviar o formulário.
A cópia do código é a seguinte:
$ scope.login = function () {
$ scope.User = {
login: $ ("#login"). val (),
Senha: $ ("#senha"). Val ()
};
...
retornar falso;
};
OK, não há problema com o Firefox agora, mas o que devo fazer com o Chrome?
O Chrome solicitará apenas ao usuário armazenar a senha quando o formulário for realmente iniciar uma solicitação de postagem, mas, dessa maneira, ela não pode ser operada com o AJAX.
Aqui está a solução:
Quando o formulário fizer uma solicitação de postagem, interceptá-lo com o submitido ng, retorne false para bloqueá-lo e envie dados com o AJAX.
Quando o Ajax retornar com sucesso, armazene a sessão em cookies e reenvie o formulário.
Quando a página for recarregada, você descobrirá que ela foi certificada e redirecioná -la para a página inicial.
Isso atualizará a página uma vez, mas só precisa ser atualizado ao fazer login. Apenas verifique se a página retorna no mesmo endereço.
Mas se o formulário for adicionado dinamicamente ao DOM, esse método ainda não funciona. A solução é adicionar um formulário oculto ao index.html. Quando você precisar enviar dados, copie os dados transportados por outros formulários para o formulário oculto.
Eu o empacotei em uma diretiva:
A cópia do código é a seguinte:
App.Directive ("ngloginsubmit", function () {
retornar {
restringir: "a",
escopo: {
Onsubmit: "= ngloginsubmit"
},
link: function (escopo, elemento, attrs) {
$ (elemento) [0] .Onsubmit = function () {
$ ("#Login-Login"). Val ($ ("#login", elemento) .val ());
$ ("#login-assassword"). val ($ ("#senha", elemento) .val ());
scope.Onsubmit (function () {
$ ("#login-form") [0] .submit ();
});
retornar falso;
};
}
};
});
A forma escondida em index.html:
A cópia do código é a seguinte:
<formulário name = "login-form" id = "login-form method =" post "action =" "style =" display: none; ">
<input name = "login" id = "login-login" type = "text">
<input name = "senha" id = "login-assassword" type = "senha">
</morm>
Formulário de login temporário
A cópia do código é a seguinte:
<forma name = "login-form" AutoComplete = "em" ng-login-submit = "login">>
<input id = "login" name = "login" type = "text" autocomplete = "on">>
<input id = "senha" name = "senha" tipo = "senha" AutoComplete = "ON">
</morm>
Controlador para login:
A cópia do código é a seguinte:
$ scope.login = function (envie) {
$ scope.User = {
login: $ ("#login"). val (),
Senha: $ ("#senha"). Val ()
};
função ajaxCallback () {
enviar();
}
retornar falso;
};
Quando refrescante, ele solicitará se deve reenviar o formulário
Agora, esse problema é resolvido, mas sempre que você pressionar F5, o navegador lembrará se deve reenviar o formulário. Isso é realmente um pouco, então adicionei um arquivo pré-login.html, e o formulário oculto envia os dados e redireciona para index.html.
Está tudo bem agora ~