Baru-baru ini, banyak siswa front-end mengeluh bahwa mereka tidak dapat merekam akun mereka bahkan jika mereka masuk ke formulir login. Ini masih merupakan masalah umum untuk aplikasi satu halaman dan halaman web yang menggunakan lebih banyak AJAX.
UserApp adalah Webapp yang dibangun menggunakan AngularJS, tetapi belum dapat mendukung fitur "Simpan Kata Sandi" browser.
Berikut beberapa masalah yang ditemukan:
Bentuk tidak dapat dimasukkan secara dinamis ke DOM menggunakan JS.
Formulir harus benar -benar mengeluarkan permintaan posting. (Tidak bisa mendapatkan konten formulir dan kemudian membuat permintaan dengan AJAX)
Ketika browser secara otomatis mengisi formulir, $ SCOPE tidak dapat memperoleh data yang diperbarui.
Firefox relatif sederhana. Selama elemen formulir memiliki atribut nama, setelah memicu acara pengiriman, itu akan secara otomatis mengingatkan pengguna apakah akan merekam data.
Salinan kode adalah sebagai berikut:
<bentuk nama = "login-form" ng-submit = "login ()">
<input id = "login" name = "login" type = "text" ng-model = "user.login">
<input id = "kata sandi" nama = "kata sandi" type = "password" ng-model = "user.password">
</form>
Persyaratan untuk Firefox untuk merekam data relatif sederhana
Tapi Firefox punya masalah. Setelah formulir diisi secara otomatis, data dalam $ SCOPE tidak akan diperbarui. Jadi saya mencari di Google dan menemukan beberapa peretasan untuk masalah ini. Tetapi saya selalu merasa bahwa solusi ini tidak perlu, karena yang saya butuhkan hanyalah membawa data ketika mengirimkan formulir, daripada beberapa teknologi pengikatan dua arah data yang sangat sembrono. Jadi saya menggunakan metode yang sangat sederhana: Dapatkan nilai elemen formulir saat mengirimkan formulir.
Salinan kode adalah sebagai berikut:
$ scope.login = function () {
$ scope.user = {
Login: $ ("#Login"). Val (),
Kata Sandi: $ ("#Kata Sandi"). Val ()
};
...
mengembalikan false;
};
Oke, tidak ada masalah dengan Firefox sekarang, tapi apa yang harus saya lakukan dengan Chrome?
Chrome hanya akan meminta pengguna apakah akan menyimpan kata sandi ketika formulir benar -benar memulai permintaan pos, tetapi dengan cara ini, itu tidak dapat dioperasikan dengan AJAX.
Inilah solusinya:
Ketika formulir membuat permintaan POST, mencegatnya dengan NG-Submit, Return False untuk memblokirnya, dan mengirimkan data dengan AJAX.
Ketika Ajax berhasil kembali, simpan sesi dalam cookie dan kirim kembali formulir.
Ketika halaman dimuat ulang, Anda akan menemukan bahwa itu telah disertifikasi dan mengarahkannya ke halaman beranda.
Ini akan menyegarkan halaman sekali, tetapi hanya perlu disegarkan saat masuk. Pastikan halaman kembali pada alamat yang sama.
Tetapi jika formulir ditambahkan secara dinamis ke DOM, metode ini masih tidak berfungsi. Solusinya adalah menambahkan formulir tersembunyi ke index.html. Ketika Anda perlu mengirimkan data, salin data yang dibawa oleh formulir lain ke formulir tersembunyi.
Saya mengemasnya ke arahan:
Salinan kode adalah sebagai berikut:
app.directive ("ngloginsubmit", function () {
kembali {
Batasi: "A",
Lingkup: {
Onsubmit: "= Ngloginsubmit"
},
link: function (scope, elemen, attrs) {
$ (elemen) [0] .onsubmit = function () {
$ ("#login-login"). Val ($ ("#login", elemen) .val ());
$ ("#login-password"). Val ($ ("#password", elemen) .val ());
scope.onsubmit (function () {
$ ("#Login-Form") [0] .submit ();
});
mengembalikan false;
};
}
};
});
Formulir Tersembunyi di Index.html:
Salinan kode adalah sebagai berikut:
<Form name = "login-form" id = "login-form" metode = "post" action = "" style = "display: none;">
<input name = "login" id = "login-login" type = "text">
<input name = "kata sandi" id = "login-password" type = "password">
</form>
Formulir login sementara
Salinan kode adalah sebagai berikut:
<Form name = "login-form" autocomplete = "on" ng-login-submit = "login">
<input id = "login" name = "login" type = "text" autocomplete = "on">
<input id = "kata sandi" name = "password" type = "password" autocomplete = "on">
</form>
Pengontrol untuk login:
Salinan kode adalah sebagai berikut:
$ scope.login = function (kirim) {
$ scope.user = {
Login: $ ("#Login"). Val (),
Kata Sandi: $ ("#Kata Sandi"). Val ()
};
function ajaxcallback () {
kirim();
}
mengembalikan false;
};
Saat menyegarkan, itu akan meminta apakah akan mengirimkan kembali formulir
Sekarang masalah ini terpecahkan, tetapi setiap kali Anda menekan F5, browser akan mengingatkan Anda apakah akan mengirimkan kembali formulir tersebut. Ini benar-benar agak bercinta, jadi saya menambahkan file pre-login.html, dan bentuk tersembunyi mengirimkan data ke dalamnya, dan kemudian mengarahkan ke index.html.
Tidak apa -apa sekarang ~