【实战】cookie+token实现网站『持久登录』

一、基础概念

（1）正确获取复选框数据

javascript <input type="checkbox" name="body[]" value="fb"/>

中括号的作用是告诉后端它是一个数组

（2）语义化

因为HTML不具备语义化所以HTML5出了很多标签

同时举例，input将type值设置为submit/reset也可以实现提交和重置，但是因为不够具备语义化所以将用button来实现表单的提交和重置

（3）合法性

合法性的意思并不是数据长度够不够，而是制定了一套规则，提交的数据是否符合规则

前端后端都得做数据合法性验证

（4）阻止表单提交

1. 事件句柄方式提交

 <form action="server/b3.php" method="post" onsubmit="return false"></form>

事件句柄的方式，无论return什么都可以提交 但是return false 就不行 0也可以提交 只认布尔类型

2. JS获取提交事件

onSubmit.onclick = function(){var e = e || window.event; e.preventDefault; }

阻止默认事件提交

（5）使用方式

二、持久登录

（1）持久登录

登录了以后就一直处于登录状态

（2）单点登录

在不同源的一个系统下，任一一个站点做了登陆操作，其余的站点同样处于登录状态的机制叫做单点登录机制

首先会检查是否存在auth，如果不存在就会让你登录，当你输入用户密码点击登录的那一刻，就已经生成了auth并且页面会刷新，然后JS程序会获取auth，将auth传给后端，后端会对其身份识别码、身份令牌、过期时间进行验证。如果验证通过就进入登录状态，未通过进入未登录状态并删除auth-cookie


前端登录会进行验证，把登录信息传给后端会再次验证，验证完成后会刷新进行auth验证


auth存在并且通过验证就会保持登录状态，只有auth不存在才会让你登录，所以如果auth存在是不会让你登录的

（3）加密方式

1. salt 加密字符串
2. username -> md5(md5(username)+salt) = ident_code 身份识别码
3. password -> md5(md5(password)+salt)
4. token 身份令牌 32/16 A-Za-z-0-9 随机字符串（每次只要有登录操作，都重新生成）
5. 设置cookie -> auth = ident_code:token
   

（4）后端设置cookie

后端设置cookie 倒数第二第一个参数是有效路径、有效域，过期时间考虑到时区不同所以要在数据库存储时间戳

setcookie('auth', ident_code:token, 过期时间, '/', '.baidu.com')

为什么设置了时间还要存到数据库？
cookie的过期时间是系统时间，服务器有服务器时间，把过期时间存在数据库就是以服务器时间为准。

三、实战操作

操作思路

• 设置基础模块化(两个模块，一个模块写业务，把业务方法return出去，另一个模块调用打开关闭与登录)
• 实现打开关闭窗口(关闭时还原密码取消选中)
• 数据合法验证
• 登录实现
• 检查缓存方法
• 渲染用户名方法

重点

• 单一数据模板替换
• 检查auth，如果一致直接切换为登录状态

var initLogin=(function(doc){
    var oModal = document.getElementsByClassName("js_modal")[0],
        oUserName = document.getElementById('js_username'),
        oPassword = document.getElementById('js_password'),
        oCheckBox = document.getElementById('js_persistedLogin'),
        oErrorTip = document.getElementsByClassName('js_errorTip')[0],
        oForm = document.getElementById('js_loginForm'),
        loginTpl = document.getElementById('js_loginTpl').innerHTML,
        userTpl = document.getElementById('js_userTpl').innerHTML,
        loginTopStatus = document.getElementsByClassName('js_loginStatus')[0];
    return{
       openBord: function (){
            oModal.style.display = "block"
        },
       closeBord: function (){
             oModal.style.display = "none"
             oUserName.value = ''
             oPassword.value = ''
             oCheckBox.checked = ''
        },
        login: function(e){
            var e = e || window.event;
            e.preventDefault();
            var username = trimSpace(oUserName.value),
                password = trimSpace(oPassword.value),
                checkBox = oCheckBox.checked;
            if(username.length<6 || username.length>20){
                oErrorTip.innerHTML = '用户名长度不正确'
                return;
            }
            if(password.length<6 || password.length>20){
                oErrorTip.innerHTML = '用户名密码不正确'
                return;
            }
            console.log(password);
            xhr.ajax({
                url: "http://localhost/api_for_study/index.php/User/login",
                type:'POST',
                data:{
                     username: username,
                     password: password,
                     isPersistedLogin: checkBox
                },
                dataType: 'JSON',
                success:function(data){
                     var code = data.error_code;
 
                     switch(code){
                        case '1001':
                          oErrorTip.innerHTML = '用户名长度不正确';
                          break;
                        case '1002':
                          oErrorTip.innerHTML = '密码长度不正确';
                          break;
                        case '1003':
                          oErrorTip.innerHTML = '此用户名不存在';
                          break;
                        case '1004':
                          oErrorTip.innerHTML = '密码不正确';
                          break;
                        case '1005':
                          oErrorTip.innerHTML = '登录失败，请重新登录';
                          break;
                        case '200':
                          location.reload();
                          break;
                        default:
                          break;
                      }
                }
            })
 
        },
        authCookie: function(){
            var _self = this;
            manageCookies.get('auth',function(data){
                if(data != undefined){
                    xhr.ajax({
                        url:"http://localhost/api_for_study/index.php/User/checkAuth",
                        dataType:'JSON',
                        data:{
                           auth:data
                        },
                        type:'POST',
                        success:function(data){
                        var code = data.error_code;
 
                          switch(code){
                            case '1005':
                              oErrorTip.innerHTML = '登录失败，请重新登录',
                              _self.openBord();
                              _self.render(false);
                              break;
                            case '1006':
                              oErrorTip.innerHTML = '登录验证错误，请重新登录',
                              _self.openBord();
                              _self.render(false);
                              break;
                            case '1007':
                              oErrorTip.innerHTML = '登录已过期，请重新登录',
                              _self.openBord();
                              _self.render(false);
                              break;
                            case '200':
                              _self.render(true);
                              break;
                            default:
                              break;
                          }
                        }
                    })
                }
            })
        },
        render:function(status){
 
            var _self = this;
            if(status){
                manageCookies.get('nickname', function(data){
 
                     loginTopStatus.innerHTML= userTpl.replace(/{{(.*?)}}/g, data);
                  });
            }else{
                loginTopStatus.innerHTML = loginTpl;
            }
        }
    }
})(document);
(function(doc){
    var oCloseBtn = document.getElementsByClassName("js_closeBtn")[0],
        oOpenBtn = document.getElementsByClassName("js_openBtn")[0],
        oLoginBtn = document.getElementsByClassName("js-loginBtn")[0]
    var init = function(){
        bindEvent();
        initLogin.authCookie();
    }
    function bindEvent(){
        oOpenBtn.addEventListener("click", initLogin.openBord,false);
        oCloseBtn.addEventListener("click", initLogin.closeBord,false);
        oLoginBtn.addEventListener('click', initLogin.login, false);
    }
    init();
})(document);