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

2022-08-19 12:56:31

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

  • 登录页面
    -html
<form><labelfor="username">用户名:</label><inputtype="text"name="username"id="username"><br/><labelfor="username">密码:</label><inputtype="password"name="password"id="password"><br/><label>是否记住:</label><selectid="remember"><optionvalue="0">不记住</option><optionvalue="1">记住</option></select><br/><inputid="submit"type="button"value="提交"><h1id="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){returnthis.getAll()[key];},set:function(key,value,time){var date=newDate().getTime()+time*1000;
          document.cookie=key+'='+value+';expires='+newDate(date).toUTCString();},
      remove:function(key){var date=newDate().getTime()-1;
          document.cookie=key+'=;expires='+newDate(date).toUTCString();}};//页面加载完成后执行以下代码$(function(){var username=cookie.get('username');//获取cookievar 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><buttonid="zxBtn">注销</button>

-js

//还是自己封装的cookievar 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){returnthis.getAll()[key];},set:function(key,value,time){var date=newDate().getTime()+time*1000;
            document.cookie=key+'='+value+';expires='+newDate(date).toUTCString();},
        remove:function(key){var date=newDate().getTime()-1;
            document.cookie=key+'=;expires='+newDate(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);
  • 作者:羽公子
  • 原文链接:https://blog.csdn.net/qq_35333936/article/details/84851487
    更新时间:2022-08-19 12:56:31