Recientemente, muchos estudiantes de front-end se han quejado de que no pueden registrar su cuenta incluso si inician sesión en el formulario de inicio de sesión. Este sigue siendo un problema común para aplicaciones de una sola página y páginas web que usan más AJAX.
UserApp es una aplicación web creada con AngularJS, pero no ha podido admitir la función "Guardar contraseña" del navegador.
Aquí hay algunos problemas encontrados:
La forma no se puede insertar dinámicamente en el DOM usando JS.
El formulario realmente debe emitir una solicitud de publicación. (No se puede obtener contenido de formulario y luego hacer una solicitud con AJAX)
Cuando el navegador llena automáticamente el formulario, $ alcance no puede obtener los datos actualizados.
Firefox es relativamente simple. Mientras el elemento de formulario tenga un atributo de nombre, después de activar el evento de envío, recordará automáticamente al usuario si registra los datos.
La copia del código es la siguiente:
<Form name = "Login-form" ng-submit = "login ()">
<input id = "login" name = "login" type = "text" ng-model = "user.login">
<input id = "contraseña" name = "contraseña" type = "contraseña" ng-model = "user.password">
</form>
El requisito de que Firefox registre los datos es relativamente simple
Pero Firefox tiene un problema. Después de que el formulario se llene automáticamente, los datos en $ alcance no se actualizarán. Así que busqué en Google y encontré algunos hacks para este problema. Pero siempre creo que estas soluciones son innecesarias, porque todo lo que necesito es traer los datos conmigo cuando envíe el formulario, en lugar de una tecnología de enlace de dos vías muy frívolo de datos. Así que utilicé un método muy simple: obtener el valor del elemento de formulario al enviar el formulario.
La copia del código es la siguiente:
$ scope.login = function () {
$ scope.user = {
Iniciar sesión: $ ("#Login"). Val (),
Contraseña: $ ("#contraseña"). Val ()
};
...
devolver falso;
};
Ok, ahora no hay problema con Firefox, pero ¿qué debo hacer con Chrome?
Chrome solo solicitará al usuario si almacena la contraseña cuando el formulario del formulario realmente inicia una solicitud de publicación, pero de esta manera, no se puede operar con AJAX.
Aquí está la solución:
Cuando el formulario realice una solicitud posterior, interceptarlo con Ng-submit, devolver falso para bloquearlo y enviar datos con AJAX.
Cuando AJAX regrese correctamente, almacene la sesión en cookies y vuelva a enviar el formulario.
Cuando la página se vuelva a cargar, encontrará que ha sido certificada y la redirige a la página de inicio.
Esto actualizará la página una vez, pero solo debe actualizarse al iniciar sesión. Solo asegúrese de que la página devuelva a la misma dirección.
Pero si el formulario se agrega dinámicamente al DOM, este método aún no funciona. La solución es agregar una forma oculta a index.html. Cuando necesite enviar datos, copie los datos llevados por otros formularios al formulario oculto.
Lo empaqué en una directiva:
La copia del código es la siguiente:
app.directive ("ngloginsubmit", function () {
devolver {
Restringir: "A",
alcance: {
onsubmit: "= ngloginsubmit"
},
enlace: función (alcance, elemento, attrs) {
$ (elemento) [0] .onsubmit = function () {
$ ("#login-login"). Val ($ ("#login", elemento) .val ());
$ ("#Login-Password"). Val ($ ("#contraseña", elemento) .val ());
scope.onsubmit (function () {
$ ("#Forma de inicio de sesión") [0] .subMit ();
});
devolver falso;
};
}
};
});
El formulario oculto en index.html:
La copia del código es la siguiente:
<Form name = "Login-form" id = "Login-form" Method = "Post" Action = "" Style = "Display: None;">
<input name = "Login" id = "Login-Login" type = "Text">
<input name = "Password" id = "Login-password" type = "contraseña">
</form>
Formulario de inicio de sesión temporal
La copia del código es la siguiente:
<Form name = "Login-form" Autocomplete = "on" ng-login-submit = "login">
<input id = "Login" name = "Login" type = "Text" AutoComplete = "ON">
<input id = "contraseña" name = "contraseña" type = "contraseña" autocomplete = "en">
</form>
Controlador para el inicio de sesión:
La copia del código es la siguiente:
$ scope.login = function (enviar) {
$ scope.user = {
Iniciar sesión: $ ("#Login"). Val (),
Contraseña: $ ("#contraseña"). Val ()
};
function aJaxCallback () {
entregar();
}
devolver falso;
};
Al refrescarse, solicitará si volver a enviar el formulario
Ahora se resuelve este problema, pero cada vez que presiona F5, el navegador le recordará si volver a enviar el formulario. Esto es realmente un poco jodido, así que agregué un archivo pre-login.html, y el formulario oculto le envía los datos, y luego redirige a index.html.
Está bien ahora ~