这里做一个简单的登陆验证功能，两个页面：login登陆页面和index首页。login.html登陆时验证用户名和密码是否正确，正确提示登陆成功，并且跳转页面到index.html，失败提示登陆失败，重置表单。登陆成功到达index页面后，显示欢迎登陆xxx（xxx为用户名），可以退出登录。

使用session存储用户数据

const session = require('express-session')

// 配置session
app.use(session({
  name:'demo',
  secret:'demo',
  resave:false,  //从末次访问时间进行计算cookie的过期时间
  saveUninitialized:true //首次刷新页面，但是还没登录，就会生成cookie
}))

接口

// api接口
app.post('/api/login',(req,res)=>{
  const {username,password} = req.body
  if(username == 'admin' && password == '123456'){
    // 数据信息和状态
    req.session.userinfo = req.body
    req.session.isLogin = true
    res.send({code:1,msg:'登录成功'})
  }else{
    res.send({code:0,msg:'登录失败'})
  }
})

这里把post传过来的用户信息命名为userinfo存储在session中，根据session的isLogin的值判断用户是否登录成功。

登录验证

// 登录验证
app.get('/api/username',(req,res)=>{
  if(req.session.isLogin){
    res.send({
      code:1,
      msg:'欢迎登录',
      data:req.session.userinfo.username
    })
  }else{
    res.send({code:0,msg:'请登录'})
  }
})

退出登录

// 退出登录
app.get('/api/logout',(req,res)=>{
  // 摧毁session
  // req.session = null
  req.session.destroy()
  res.send({code:1,msg:'退出成功'})
})

前台根据res的code值判断登录成功与失败。

具体代码

index.js

const express = require('express')
const app = express()
const ejs = require('ejs')
const path = require('path')
const session = require('express-session')

// 配置session
app.use(session({
  name:'demo',
  secret:'demo',
  resave:false,  //从末次访问时间进行计算cookie的过期时间
  saveUninitialized:true //首次刷新页面，但是还没登录，就会生成cookie
}))

// post
app.use(express.json())
app.use(express.urlencoded({extended:false}))

// 配置模板引擎
app.set('views',path.join(__dirname,'views'))
app.set('view engine','html')
app.engine('html',ejs.renderFile)

// 渲染页面
app.get('/login',(req,res)=>{
  res.render('login')
})
app.get('/',(req,res)=>{
  res.render('index')
})

// api接口
app.post('/api/login',(req,res)=>{
  const {username,password} = req.body
  if(username == 'admin' && password == '123456'){
    // 数据信息和状态
    req.session.userinfo = req.body
    req.session.isLogin = true
    res.send({code:1,msg:'登录成功'})
  }else{
    res.send({code:0,msg:'登录失败'})
  }
})

// 登录验证
app.get('/api/username',(req,res)=>{
  if(req.session.isLogin){
    res.send({
      code:1,
      msg:'欢迎登录',
      data:req.session.userinfo.username
    })
  }else{
    res.send({code:0,msg:'请登录'})
  }
})

// 退出登录
app.get('/api/logout',(req,res)=>{
  // 摧毁session
  // req.session = null
  req.session.destroy()
  res.send({code:1,msg:'退出成功'})
})

app.listen(3000,()=>{
  console.log('服务器在3000端口启动')
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
</head>
<body>
  <h3>登录页面</h3>
  <form>
    <div>
      <label for="">用户名：</label>
      <input type="text" placeholder="请输入用户名" id="username" name="username" autocomplete="off">
    </div>
    <div>
      <label for="">密码：</label>
      <input type="password" placeholder="请输入密码" id="password" name="password" autocomplete="off">
    </div>
    <div>
      <!-- 提交按钮 -->
      <input type="submit">
    </div>
  </form>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
  var btn = document.querySelector('[type=submit]')
  var username = document.querySelector('#username')
  var password = document.querySelector('#password')
  var form = document.querySelector('form')

  // 登录
  btn.onclick = function(e){
    e = e || window.event
    e.preventDefault()
    var data = {username:username.value,password:password.value}
    $.post('/api/login',data,(res)=>{
      if(res.code == 1){
        alert(res.msg)
        location.href = '/'
      }else{
        // 表单重置，这个方法只能在form身上使用
        form.reset()
        alert(res.msg)
      }
    })
  }
</script>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
</head>
<body>
  <h3>首页</h3>
  <h5>用户名</h5>
  <input type="button" value="退出登录">
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
  var btn = document.querySelector('input')

  // 登录验证
  $.get('/api/username',(res)=>{
    if(res.code == 1){
      alert(res.msg + res.data)
    }else{
      alert(res.msg)
      location.href = '/login'
    }
  })

  // 退出登录
  btn.onclick = function(){
    $.ajax({
      type:'GET',
      url:'/api/logout',
      dataType:'json',
      success:res=>{
        if(res.code == 1){
          alert(res.msg)
          location.href = '/login'
        }
      }
    })
  }
</script>

简单的前后端身份验证

使用session存储用户数据

接口

登录验证

退出登录

具体代码