node.js（第八章）登录鉴权方式二 JSON Web Token (JWT)_jsonwebtoken.verify如何鉴权-CSDN博客

本文链接：https://blog.csdn.net/sdhshsjh/article/details/126142622

首先npm下载JWT

npm i jsonwebtoken

后端：

在根目录下创建util文件夹，创建文件JWT.js，写代码

// 封装jwt
const jwt = require("jsonwebtoken")
const secret="123456"
var JWT = {
  // 生成token
  generate(value,time) {
    return jwt.sign(value,secret,{expiresIn:time})
  },
  // 校验token
  verify(token) {
    try {
      return jwt.verify(token,secret)
    } catch (error) {
      return false
    }
  }
}

module.exports=JWT

model文件夹下的UserModel.js文件，写代码

const mongoose = require('mongoose')
// 设置字段类型
const Schema=mongoose.Schema
const UserType = {
  username: String,
  password: String,
  age:Number
}

// 模型 user 将会对应 users 集合
const UserModel = mongoose.model("user",new Schema(UserType))

module.exports=UserModel

在routes文件夹下的users.js文件，写代码

var express = require('express')
const UserController = require('../controller/UserController')
var router = express.Router()

// 查 
router.get('/user/', UserController.getUser)

//登录
router.post('/login', UserController.login)

module.exports = router

在controller文件夹下的UserController.js文件，写代码

const UserService = require('../service/UserService')
const JWT =require('../util/JWT')
const UserController = {
  getUser:async (req, res) => {
    const { page, limit } = req.query
    const data=await UserService.getUser( page, limit )
    res.send(data)
  },
  login: async (req, res)=> {
  const { username, password } = req.body
  const data = await UserService.login(username, password)
  if (data.length === 0) {
     res.send({
        ok:0
      })
   } else {
    // 设置token
    const token = JWT.generate({
      id: data[0]._id,
      username:data[0].username
    },"10s")
    // token返回在header
    res.header("Authorization", token)
     res.send({
       ok: 1
     })
   }
  }
}

module.exports=UserController

在service文件夹下的UserService.js文件，写代码

// 操作数据库
const UserModel=require('../model/UserModel')
const UserService = {
  getUser: (page,limit) => {
    return UserModel.find({},["username","age"]).sort({age:1}).skip((page-1)*limit).limit(limit)
  },
  login: (username,password) => {
    return UserModel.find({username,password})
  }
}

module.exports=UserService

在app.js文件中写代码

// 引入封装的JWT中间件
const JWT=require('./util/JWT')

app.use((req, res, next) => {
  // 排除login相关的路由和接口
  if (req.url.includes("login")) {
    next()
    return
  }
  // 获取token
  const token = req.headers["authorization"]?.split(" ")[1]
  if (token) {
    // 验证token
    const payload = JWT.verify(token)
    if (payload) {
      // 重新计算token过期时间
      const newToken = JWT.generate({
        _id: payload._id,
        username:payload.username
      }, "10s")
      res.header("Authorization",newToken)
      next()
    } else {
      res.status(401).send({errCode:-1,errInfo:"token过期"})
    }
    console.log(token);
  } else {
     next()
  }
})

前端：

login.ejs

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // axios拦截器
    axios.interceptors.request.use(function(config) {
      // console.log('请求发出前执行的方法');
      return config;
    }, function(error) {
      return Promise.reject(error);
    });

    axios.interceptors.response.use(function(response) {
      // console.log('请求成功后第一个调用的方法');
      const { authorization } = response.headers
      authorization && localStorage.setItem("token", authorization)
      return response;
    }, function(error) {
      return Promise.reject(error);
    });
  </script>
</head>

<body>
  <div>
    <div>用户名:<input type="text" id="username"></div>
    <div>密码:<input type="password" id="password"></div>
    <button id="login">登录</button>
  </div>

  <script>
    var username = document.querySelector('#username')
    var password = document.querySelector('#password')
    var loginFun = document.querySelector('#login')
    //登录
    loginFun.onclick = () => {
      axios.post("/api/login", {
        username: username.value,
        password: password.value,
      }).then(res => {
        if (res.data.ok === 1) {
          location.href = '/'
        } else {
          alert('密码错误！')
        }
      })
    }
  </script>
</body>

</html>

index.ejs

<!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>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // axios拦截器
    // 请求发出前执行的方法
    axios.interceptors.request.use(function(config) {
      const token = localStorage.getItem("token")
      config.headers.Authorization = `Bearer ${token}`
      return config;
    }, function(error) {
      return Promise.reject(error);
    });

    // 请求成功后第一个调用的方法
    axios.interceptors.response.use(function(response) {
      const { authorization } = response.headers
      authorization && localStorage.setItem("token", authorization)
      return response;
    }, function(error) {
      // 请求失败，跳转登录页面
      if (error.response.status === 401) {
        localStorage.removeItem("token")
        location.href = "/login"
      }
      return Promise.reject(error);
    });
  </script>
</head>

<body>
  <div>
    <div>
      <button id="logout">退出登录</button>
    </div>
  </div>
  <script>
    var logoutFun = document.querySelector('#logout')
    axios.get("/api/user/?page=1&limit=2").then(res => {
      console.log(res);
    })

    // 退出登录
    logoutFun.onclick = () => {
      localStorage.removeItem('token')
      location.href = '/login'
    }
  </script>
</body>

</html>