クッキーはパスワードと自動登録を覚える機能を実現します.
50526 ワード
1.需要分析:
今は元のページでユーザー名とパスワードを入力してパスワードを覚えるボタンをクリックしてログインインターフェースに成功し、ログアウトをクリックして元のページを更新します.元のページには前回のユーザー名とパスワードが自動的に保存されています.ユーザーが自動ログインをクリックすると、ログインを終了して元のページを更新し、元のページにユーザー名とパスワードが表示され、500 ms後に自動的にログイン画面に入ります.ユーザーがログイン画面に入ったら、再度ページを更新してもログイン画面に留まります.注意:ここのオリジナルページと登録ページは一つのページに書いてあります.透明度と階層で現在どのページを表示するべきかを区別します.
2.ソリューション注:パスワードを覚えているクッキーの名前はremMeで、自動登録したクッキーの名前はautユーザ名のクッキーの名前はusernameで、パスワードのクッキーの名前はpassword です.注:cookie名はnameという意味で登録状態を保存しています.name値はtrueであると常にログイン画面にあります.このcookieがないと登録を終了します.このクッキーはNodeJsで設定し、削除しました. 補足知識:どうやってフロントエンドjsで対応するクッキーを得ることができますか?
部分コードは以下の通りです
解析:一般的には、ユーザーパスワードというプライバシーの情報は、フロントエンドページに直接さらさないほうがいいです.私たちはソリューションを改善し続けて、ユーザー情報をsessionに保存します.(1)ログイン確認ボタンをクリックした後、NodeJsはログインが成功すれば、ログインが成功すれば、checkがtrueまたはcheck 1であり、userオブジェクトを設定し、属性はusernameとpasswordであり、ユーザー名とパスワードをsessionに保存する.そしてユーザー名usernameというcookieを設定します.checkとcheck 1は共にfalseであり、usernameというcookieを削除し、req.session.userというsessionの対象を削除する.パスワードcheckを覚えて、自動的にcheck 1に登録して、状態nameの3つの対応するcookieを登録します.(2)インターフェースを更新する時、この二つのクッキー:checkがtrueまたはcheck 1がtrueであれば、ajax要求を送信してreq.session.user.passwordを取得する.この値をパスワードのinputボックスに入れて、ユーザー名のinputボックスにクッキー名を入れます.問題:分析(2)の中のajax要求を更新しながらajax要求を送信すると、いつも実現しにくくなります.毎回、インターフェースを更新した後のパスワードinputボックスにはいつも値がありません.このスキームのコードは完了していません.
3.補足:cookieドメインをまたぐ解決
cookieはクライアントに格納されています.私たちはバックグラウンドNodeJsにフロントエンドJSがajax要求を書く時 NodeJs中
今は元のページでユーザー名とパスワードを入力してパスワードを覚えるボタンをクリックしてログインインターフェースに成功し、ログアウトをクリックして元のページを更新します.元のページには前回のユーザー名とパスワードが自動的に保存されています.ユーザーが自動ログインをクリックすると、ログインを終了して元のページを更新し、元のページにユーザー名とパスワードが表示され、500 ms後に自動的にログイン画面に入ります.ユーザーがログイン画面に入ったら、再度ページを更新してもログイン画面に留まります.注意:ここのオリジナルページと登録ページは一つのページに書いてあります.透明度と階層で現在どのページを表示するべきかを区別します.
2.ソリューション
// cookie name value
function getCookie(name){
var cookieArray=document.cookie.split(";");
for(var i=0;i<cookieArray.length;++i){
var cookies=cookieArray[i].split("=");
if(cookies[0].trim()==name){
return cookies[1];
}
}
if(i==cookieArray.length){
return "";
}
}
// cname, cvalue, exdays cookie
//d.getTime() 1970
//d.toGMTString() :Thu, 20 Feb 2020 07:54:01 GMT
function SetCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}//that.remember ，that.remember1
//that.buttonTwo
// (1)
rememberFunction: function(){
var that=this;
function addButtonTwo(){
if(that.remember.checked==true&&that.te2.value!=" "&&that.pa2.value!=" "){
var name=that.te2.value;
var pass=that.pa2.value;
SetCookie("remMe","true",1);
SetCookie("username",name,1);
SetCookie("password",pass,1);
}else{
SetCookie("remMe","false",1);
if(that.remember1.checked==false){
SetCookie("username","",-1);
SetCookie("password","",-1);
}
}
if(that.remember1.checked==true&&that.te2.value!=" "&&that.pa2.value!=" "){
var name=that.te2.value;
var pass=that.pa2.value;
SetCookie("auto","true",1);
SetCookie("username",name,1);
SetCookie("password",pass,1);
}else{
SetCookie("auto","false",1);
if(that.remember.checked==false){
SetCookie("username","",-1);
SetCookie("password","",-1);
}
}
}
that.buttonTwo.addEventListener('click',addButtonTwo);
},
// (2)
//that.page2 , that.wrapper ，
//that.load
//that.te2 input ,that.pa2 input
windowOnload: function(){
var that=this;
window.onload=function(){
that.load.onmouseenter();
if(getCookie('name')){
that.page2.style.opacity=1;
that.page2.style.zIndex=1;
that.wrapper.style.opacity=0;
that.wrapper.style.zIndex=0;
}else{
if(getCookie('remMe')=='true'){
that.remember.checked=true;
that.te2.value=getCookie('username');
that.pa2.value=getCookie('password');
that.te2.style.color="#000";
that.pa2.style.color="#000";
}else if(getCookie('remMe')=='false'){
if(getCookie('auto')=='false'){
SetCookie("username","",-1);
SetCookie("password","",-1);
}
}
if(getCookie('auto')=='true'){
that.remember1.checked=true;
that.te2.value=getCookie('username');
that.pa2.value=getCookie('password');
that.te2.style.color="#000";
that.pa2.style.color="#000";
setTimeout(function(){
if(that.remember1.checked== "true"){
SetCookie("name","true",30);
that.page2.style.opacity=1;
that.page2.style.zIndex=1;
that.wrapper.style.opacity=0;
that.wrapper.style.zIndex=0;
}
},500);
}else{
if(getCookie('remMe')=='false'){
SetCookie("username","",-1);
SetCookie("password","",-1);
}
}
}
}
}部分コードは以下の通りです
//NodeJs (1)
// ---> MySql
function select(name){
//
var p=new Promise(function(resolve,reject){
var sql='SELECT test_name,test_pass FROM websites WHERE test_name=?';
var f=[];
f.push(name);
connection.query(sql,f,function(err,result){
if(err){
console.log('[SELECT ERROR]-',err.message);
}else{
var dataString=JSON.stringify(result);
var data=JSON.parse(dataString);
console.log('data[0] : ',data[0]);
resolve(data[0]);
}
}
})
return p;
}
// ----->GET
server.use('/login',function(req,res){
var name=req.query['name'];
var pass=req.query['pass'];
var check=req.query['check'];
var check1=req.query['check1'];
//1.
//2.
var test=select(name);
var users;
test.then(function(data){
users=data;
// users={name:"222",pass:"333",check:0}
console.log(' : ',users);
if(users==undefined){
res.send({ok:false,msg:" "});
}else if(users["test_pass"]!=pass){
res.send({ok:false,msg:" "});
}else{
if(check=='true'||check1=='true'){
res.cookie('username',name,{path:'/',maxAge:1000*3600*24});
res.cookie('password',pass,{path:'/',maxAge:1000*3600*24});
}else if(check=='false'&&check1=='false'){
res.cookie('username',name,{path:'/',maxAge:-1});
res.cookie('password',pass,{path:'/',maxAge:-1});
}
res.cookie('name',"true",{path:'/',maxAge:1000*3600*24*30});
res.cookie('remMe',check,{path:'/',maxAge:1000*3600*24});
res.cookie('auto',check1,{path:'/',maxAge:1000*3600*24});
res.send({ok:true,msg:" "});
}
})
})
// ------>GET
server.use('/quit',function(req,res){
res.clearCookie('name');
res.send(' 。 ');
})解析:一般的には、ユーザーパスワードというプライバシーの情報は、フロントエンドページに直接さらさないほうがいいです.私たちはソリューションを改善し続けて、ユーザー情報をsessionに保存します.(1)ログイン確認ボタンをクリックした後、NodeJsはログインが成功すれば、ログインが成功すれば、checkがtrueまたはcheck 1であり、userオブジェクトを設定し、属性はusernameとpasswordであり、ユーザー名とパスワードをsessionに保存する.そしてユーザー名usernameというcookieを設定します.checkとcheck 1は共にfalseであり、usernameというcookieを削除し、req.session.userというsessionの対象を削除する.パスワードcheckを覚えて、自動的にcheck 1に登録して、状態nameの3つの対応するcookieを登録します.(2)インターフェースを更新する時、この二つのクッキー:checkがtrueまたはcheck 1がtrueであれば、ajax要求を送信してreq.session.user.passwordを取得する.この値をパスワードのinputボックスに入れて、ユーザー名のinputボックスにクッキー名を入れます.問題:分析(2)の中のajax要求を更新しながらajax要求を送信すると、いつも実現しにくくなります.毎回、インターフェースを更新した後のパスワードinputボックスにはいつも値がありません.このスキームのコードは完了していません.
3.補足:cookieドメインをまたぐ解決
cookieはクライアントに格納されています.私たちはバックグラウンドNodeJsに
res.header("Access-Control-Allow-Origin","*");を設けてもajaxクロスドメインを実現することができず、ajaxクロスドメインを実現することができません.cookieを連れてきます.この問題はどう解決しますか? xhr.open('get',url,true);
// cookie 3
xhr.withCredentials = true;
xhr.send(null);server.use('*',function(req,res,next){
// cookie 1
res.header("Access-Control-Allow-Origin",req.headers.origin);
// cookie 2
res.header("Access-Control-Allow-Credentials",true);
res.header("Access-Control-Allow-Headers","Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
})