用cookie实现简单的用户登录验证

一共是两个页面，一个路由

• 登录页面
  -html

<form>
     <label for="username">用户名：label>
     <input type="text" name="username" id="username"><br/>
     <label for="username">密码：label>
     <input type="password" name="password" id="password"><br/>
     <label>是否记住：label>
     <select id="remember">
         <option value="0">不记住option>
         <option value="1">记住option>
     select><br/>
     <input id="submit" type="button" value="提交">
     <h1 id="h1">h1>
 form>

-js
核心代码cookie.set('logined',1);

//我自己封装了一个cookie，方便使用，详情可以看我之前的博客
var cookie={
      getAll:function(){
          var obj={};
          var arr=document.cookie.split('; ');
          for(var i=0;i<arr.length;i++){
              obj[arr[i].split('=')[0]]=arr[i].split('=')[1];
          }
          return obj;
      },
      get:function(key){
          return this.getAll()[key];
      },
      set:function(key,value,time){
          var date=new Date().getTime()+time*1000;
          document.cookie=key+'='+value+';expires='+new Date(date).toUTCString();
      },
      remove:function(key){
          var date=new Date().getTime()-1;
          document.cookie=key+'=;expires='+new Date(date).toUTCString();
      }
  };
  //页面加载完成后执行以下代码
  $(function(){
      var username=cookie.get('username');//获取cookie
      var password=cookie.get('password');
      $('#username').val(username);//将input框中的内容填上
      $('#password').val(password);
      if(cookie.get('logined')==1){//如果设置了这个'logined'cookie
          location.href='/home.html';//则跳转到登录成功界面
      }
  })
  $('#submit').click(function(){//提交按钮的点击事件
      var username=$('#username').val();//获取input框中的用户名和密码
      var password=$('#password').val();
      if($('#remember').val()==1){//如果选择了记住
          cookie.set('username',username);//设置cookie
          cookie.set('password',password);
      }else{
          cookie.remove('username',username);//否则删除cookie
          cookie.remove('password',password);
      }
      $.ajax({//post请求
          url:'/login',
          type:'post',
          data:{
              username:username,
              password:password
          },
          success:function(data){
              if(data.error==0){//如果用户名和密码正确
                  cookie.set('logined',1);//设置logined cookie并跳转到登陆成功界面
                  location.href='/home.html';
              }else{
                  $('#h1').html('用户名或密码错误')
              }
          }
      })
  })

-登录成功界面
-html

<h1>登录成功h1>
 <button id="zxBtn">注销button>

-js

//还是自己封装的cookie
 var cookie={
        getAll:function(){
            var obj={};
            var arr=document.cookie.split('; ');
            for(var i=0;i<arr.length;i++){
                obj[arr[i].split('=')[0]]=arr[i].split('=')[1];
            }
            return obj;
        },
        get:function(key){
            return this.getAll()[key];
        },
        set:function(key,value,time){
            var date=new Date().getTime()+time*1000;
            document.cookie=key+'='+value+';expires='+new Date(date).toUTCString();
        },
        remove:function(key){
            var date=new Date().getTime()-1;
            document.cookie=key+'=;expires='+new Date(date).toUTCString();
        }
    };
    if(cookie.get('logined')!=1){//如果logined cookie的值不为1
            location.href='cookie.html';//跳转回登录页面
        }
    $('#zxBtn').click(function(){//注销按钮事件
        cookie.remove('logined');//移除logined cookie
        location.href='/cookie.html';
    })

路由配置

var express=require('express');
var bodyParser=require('body-parser');
var app=express();
app.use(express.static('./public'));
app.use(bodyParser.urlencoded({extended:false}));

app.post('/login',function(req,res){
    var username=req.body.username;
    var password=req.body.password;
    if(username=='jack'&&password=='123'){
        res.send({
            error:0
        })
    }else{
        res.send({
            error:1
        })
    }
})
app.listen(8080);