최근에 많은 프론트 엔드 학생들이 로그인 양식에 로그인하더라도 계정을 기록 할 수 없다고 불평했습니다. 이는 여전히 단일 페이지 응용 프로그램 및 더 많은 Ajax를 사용하는 웹 페이지의 일반적인 문제입니다.
UserApp은 AngularJS를 사용하여 구축 된 웹 앱이지만 브라우저의 "Save Saver Password"기능을 지원할 수 없었습니다.
발견 된 몇 가지 문제는 다음과 같습니다.
양식은 JS를 사용하여 DOM에 동적으로 삽입 할 수 없습니다.
양식은 실제로 사후 요청을 발행해야합니다. (양식 컨텐츠를 얻을 수없고 Ajax와 함께 요청할 수 없습니다)
브라우저가 양식을 자동으로 채우면 $ SCOPE는 업데이트 된 데이터를 얻을 수 없습니다.
Firefox는 비교적 간단합니다. 양식 요소에 이름 속성이있는 한, 제출 이벤트를 트리거 한 후에는 사용자에게 데이터를 녹화할지 자동으로 상기시킵니다.
코드 사본은 다음과 같습니다.
<form name = "login-form"ng-submit = "login ()">
<input id = "로그인"이름 = "로그인"유형 = "텍스트"ng-model = "user.login">
<입력 id = "비밀번호"이름 = "비밀번호"유형 = "비밀번호"ng-model = "user.password">
</form>
Firefox가 데이터를 기록하기위한 요구 사항은 비교적 간단합니다.
그러나 Firefox에는 문제가 있습니다. 양식이 자동으로 채워지면 $ 범위의 데이터가 업데이트되지 않습니다. 그래서이 문제에 대한 해킹을 찾았습니다. 그러나 나는 항상 이러한 솔루션이 불필요하다고 생각합니다. 왜냐하면 내가 필요한 것은 매우 경력적인 데이터 양방향 바인딩 기술보다는 양식을 제출할 때 데이터를 가져 오는 것입니다. 그래서 나는 매우 간단한 방법을 사용했습니다. 양식을 제출할 때 양식 요소의 값을 얻으십시오.
코드 사본은 다음과 같습니다.
$ scope.login = function () {
$ scope.user = {
로그인 : $ ( "#login"). val (),
비밀번호 : $ ( "#password"). val ()
};
...
거짓을 반환합니다.
};
자, 지금 Firefox에는 문제가 없지만 Chrome과 어떤 관계가 있어야합니까?
Chrome은 양식 양식이 실제로 게시물 요청을 시작할 때 비밀번호를 저장할 것인지 사용자에게만 촉구하지만 AJAX로 작동 할 수는 없습니다.
다음은 해결책입니다.
양식이 사후 요청을 할 때 NG-Submit과 함께 가로 채서 False를 반환하여 차단 한 다음 Ajax로 데이터를 제출하십시오.
Ajax가 성공적으로 돌아 오면 세션을 쿠키에 저장하고 양식을 다시 제출하십시오.
페이지가 다시로드되면 인증이 인증되어 홈페이지로 리디렉션되었습니다.
이렇게하면 페이지가 한 번 새로 고쳐 지지만 로그인 할 때만 새로 고침해야합니다. 페이지가 같은 주소로 돌아가도록하십시오.
그러나 양식이 DOM에 동적으로 추가되면이 방법은 여전히 작동하지 않습니다. 해결책은 index.html에 숨겨진 양식을 추가하는 것입니다. 데이터를 제출 해야하는 경우 다른 양식으로 운반 된 데이터를 숨겨진 양식에 복사하십시오.
지침으로 포장했습니다.
코드 사본은 다음과 같습니다.
app.directive ( "ngloginsubmit", function () {
반품 {
제한 : "A",
범위 : {
onsubmit : "= ngloginsubmit"
},
링크 : 함수 (범위, 요소, attrs) {
$ (요소) [0] .onsubmit = function () {
$ ( "#login-login"). val ($ ( "#login", element) .val ());
$ ( "#login-password"). val ($ ( "#password", element) .val ());
scope.onsubmit (function () {
$ ( "#login-form") [0] .submit ();
});
거짓을 반환합니다.
};
}
};
});
index.html에 숨겨진 양식 :
코드 사본은 다음과 같습니다.
<form name = "login-form"id = "login-form"method = "post"action = ""style = "display : none;">
<입력 이름 = "로그인"id = "login-login"type = "text">
<input name = "password"id = "login-password"type = "password">
</form>
임시 로그인 양식
코드 사본은 다음과 같습니다.
<form name = "login-form"autocomplete = "on"ng-login-submit = "login">
<input id = "로그인"이름 = "로그인"유형 = "텍스트"autocomplete = "on">
<입력 id = "비밀번호"이름 = "비밀번호"유형 = "비밀번호"autocomplete = "on">
</form>
로그인 용 컨트롤러 :
코드 사본은 다음과 같습니다.
$ scope.login = function (제출) {
$ scope.user = {
로그인 : $ ( "#login"). val (),
비밀번호 : $ ( "#password"). val ()
};
함수 ajaxcallback () {
제출하다();
}
거짓을 반환합니다.
};
새로 고침 될 때 양식을 다시 제출할지 여부가 촉진됩니다.
이제이 문제가 해결되었지만 F5를 누를 때마다 브라우저는 양식을 다시 제출할지 여부를 상기시킵니다. 이것은 실제로 약간 빌어 먹을이므로 pre-login.html 파일을 추가하고 숨겨진 양식은 데이터를 제출 한 다음 index.html로 리디렉션합니다.
이제 괜찮아 ~