node 第八天使用前后端不分离的方式实现cookie登录验证

置顶飞衡、如日之升

于 2023-10-18 15:28:51 发布

阅读量450

点赞数

文章标签： node.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43546457/article/details/133906081

版权

实现cookie登录, 第一次登录成功后, cookie由服务端设置并保存在客户端, 后续访问在cookie过期前 (过期时间由后端设置) 将不需要登录
cookie出现的背景是
HTTP是无连接的，无状态的, 半双工(http2.0以下), 所以需要一个媒介存在http中, 服务端可以操作, 客户端也可以操作
就出现了cookie
纯后端实现cookie登录验证功能
node 后端

const fs = require('fs');
const url = require('url');
const http = require('http');
const querystring = require('querystring');
const path = require('path');

const server = http.createServer((req, res) => {
  let cookie = req.headers.cookie;
  cookie = cookie.replace(/\s/g, '');
  const cookieInfo = querystring.parse(cookie, ';');
  console.log(cookie, cookieInfo);
  res.writeHead(200, { 'content-type': 'text/html' });
  if (req.method.toUpperCase() === 'GET') {
    if (cookieInfo.token === 'abc') {
      fs.readFile('./content.html', (err, data) => {
        if (err) {
          throw err;
        }
        res.end(data, 'utf-8');
      });
    } else {
      fs.readFile('./login.html', (err, data) => {
        if (err) {
          throw err;
        }
        res.end(data, 'utf-8');
      });
    }
  } else {
    req.on('data', chunk => {
      let data = querystring.parse(chunk.toString('utf-8'));
      if (data.user === 'zhang' && data.pw === '123') {
        let date = new Date();
        date.setDate(date.getDate() + 1);
        let expires = date.toUTCString();
        res.writeHead(200, {
          'content-type': 'text/html',
          'set-cookie': [`token=abc; Expires=${expires}; HttpOnly;`, 'koken2=123']
        });
        fs.readFile('./content.html', (err, data) => {
          if (err) {
            throw err;
          }
          res.end(data, 'utf-8');
        });
      } else {
        fs.readFile('./login.html', (err, data) => {
          if (err) {
            throw err;
          }
          res.end(data, 'utf-8');
        });
      }
    });
  }
});
server.listen(3006);

未登录则返回登录页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页</title>
  </head>
  <body>
    <h1>请登录:</h1>
    <form action="http://127.0.0.1:3006/login" method="post" enctype="application/x-www-form-urlencoded">
      <input name="user" type="text" />
      <input name="pw" type="password" />
      <input type="submit" value="登录" />
    </form>
  </body>
</html>

已登录或有cookie凭证则返回内容页

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内容页</title>
  </head>
  <body>
    <h1>欢迎您~</h1>
  </body>
</html>