Récemment, de nombreux étudiants frontaux se sont plaints qu'ils ne pouvaient pas enregistrer leur compte même s'ils se connectent au formulaire de connexion. Il s'agit toujours d'un problème courant pour les applications à une page et les pages Web qui utilisent plus AJAX.
UserApp est un WebApp construit à l'aide d'AngularJS, mais il n'a pas été en mesure de prendre en charge la fonctionnalité "Enregistrer le mot de passe" du navigateur.
Voici quelques problèmes trouvés:
Le formulaire ne peut pas être inséré dynamiquement dans le DOM en utilisant JS.
Le formulaire doit réellement émettre une demande de poste. (Impossible d'obtenir du contenu de formulaire puis de faire une demande avec Ajax)
Lorsque le navigateur remplit automatiquement le formulaire, $ SCOPE ne peut pas obtenir les données mises à jour.
Firefox est relativement simple. Tant que l'élément de formulaire a un attribut de nom, après avoir déclenché l'événement de soumission, il rappellera automatiquement à l'utilisateur s'il faut enregistrer les données.
La copie de code est la suivante:
<form name = "login-form" ng-sumit = "login ()">
<input id = "login" name = "login" type = "text" ng-model = "user.login">
<entrée id = "mot de passe" name = "mot de passe" type = "mot de passe" ng-model = "user.password">
</ form>
L'exigence de Firefox à enregistrer les données est relativement simple
Mais Firefox a un problème. Une fois le formulaire rempli automatiquement, les données de $ SCOPE ne seront pas mises à jour. J'ai donc googlé et trouvé des hacks pour ce problème. Mais je pense toujours que ces solutions ne sont pas nécessaires, car tout ce dont j'ai besoin est d'apporter les données avec moi lors de la soumission du formulaire, plutôt que des données de liaison bidirectionnelles de données très frivoles. J'ai donc utilisé une méthode très simple: obtenir la valeur de l'élément de formulaire lors de la soumission du formulaire.
La copie de code est la suivante:
$ scope.login = fonction () {
$ scope.user = {
Connexion: $ ("# connexion"). Val (),
Mot de passe: $ ("# mot de passe"). Val ()
};
...
retourne false;
};
Ok, il n'y a pas de problème avec Firefox maintenant, mais que dois-je faire avec Chrome?
Chrome invitera l'utilisateur à stocker le mot de passe lorsque le formulaire du formulaire initie réellement une demande de poste, mais de cette manière, il ne peut pas être utilisé avec Ajax.
Voici la solution:
Lorsque le formulaire fait une demande de poste, interceptez-le avec NG-Sumit, renvoyez False pour les bloquer et soumettez des données avec AJAX.
Lorsque Ajax revient avec succès, stockez la session dans les cookies et soumettez le formulaire.
Lorsque la page est rechargée, vous constaterez qu'elle a été certifiée et la redirige vers la page d'accueil.
Cela actualisera la page une fois, mais il ne doit être actualisé que lors de la connexion. Assurez-vous simplement que la page revient à la même adresse.
Mais si le formulaire est ajouté dynamiquement au DOM, cette méthode ne fonctionne toujours pas. La solution consiste à ajouter un formulaire caché à index.html. Lorsque vous devez soumettre des données, copiez les données transportées par d'autres formulaires au formulaire caché.
Je l'ai emballé dans une directive:
La copie de code est la suivante:
app.directive ("ngloginsubmit", fonction () {
retour {
restreindre: «a»,
portée: {
onsubmit: "= ngloginsubmit"
},
lien: fonction (scope, élément, attrs) {
$ (élément) [0] .onsubmit = fonction () {
$ ("# login-login"). Val ($ ("# login", élément) .Val ());
$ ("# Login-Password"). Val ($ ("# mot de passe", élément) .Val ());
scope.onsubmit (function () {
$ ("# login-form") [0] .Submit ();
});
retourne false;
};
}
};
});
Le formulaire caché dans index.html:
La copie de code est la suivante:
<form name = "login-form" id = "login-form" méthode = "post" action = "" style = "affiche: aucun;">
<input name = "login" id = "login-login" type = "text">
<entrée name = "mot de passe" id = "login-password" type = "mot de passe">
</ form>
Formulaire de connexion temporaire
La copie de code est la suivante:
<form name = "login-form" AutoChatplelet = "sur" ng-login-submit = "login">
<input id = "login" name = "login" type = "text" AutoCerletele = "on">
<input id = "mot de passe" name = "mot de passe" type = "mot de passe" AutoCletelet = "ON">
</ form>
Contrôleur de connexion:
La copie de code est la suivante:
$ scope.login = fonction (soumi) {
$ scope.user = {
Connexion: $ ("# connexion"). Val (),
Mot de passe: $ ("# mot de passe"). Val ()
};
fonction ajaxcallback () {
soumettre();
}
retourne false;
};
Lorsqu'il est rafraîchissant, il incitera à soumettre à nouveau le formulaire
Maintenant, ce problème est résolu, mais chaque fois que vous appuyez sur F5, le navigateur vous rappellera si vous devez soumettre le formulaire. C'est vraiment un peu putain, j'ai donc ajouté un fichier pré-login.html, et le formulaire caché lui soumet les données, puis redirige vers index.html.
C'est bon maintenant ~