后端

依赖安装

npm i jsonwebtoken --save

在utils文件夹下新建JWT.js

const jsonwebtoken = require('jsonwebtoken')
const secret = "noah"
const JWT = {
    generate(value, exprires) {
        return jsonwebtoken.sign(value, secret, { expiresIn: exprires })
    },
    verify(token) {
        try {
            return jsonwebtoken.verify(token, secret)
        } catch (e) {
            return false
        }
    },
}

module.exports = JWT 

在对应Controller进行调用

const JWT = require("../../utils/JWT")

const UserController = {
    login: async (req, res) => {
        ...
        } else {
            // 生成token
            const token = JWT.generate({
                _id:result[0]._id,
                username:result[0].username
            },"1d")
            res.header("Authorization",token)
            res.send({
                code: "1",
            })
        } 
    }
}

app.js中添加中间件

app.use((req, res, next) => {
  // token有效，next放行
  // token过期，返回401
  // 例外情况：处于登录页面，原本就没有token
  if (req.url === "/adminapi/login") {
    next()
    return
  }
  const token = req.headers["authorization"].split(" ")[1]
  if (token) {
    const payload = JWT.verify(token)
    if (payload) {
      const newToken = JWT.generate({
        _id: payload._id,
        username: payload.username
      }, "1d")
      res.header("Authorization", newToken)
    } else {
      res.status(401).send({ errCode: "-1", errorInfo: "token过期" })
    }
  }
})

重要！注意在app.js中配置cors请求头

//cors中间件的使用
app.use(cors({
  exposedHeaders: ['Authorization'], // 允许前端访问Authorization头
  origin: 'http://localhost:5173', // 指定允许的来源
}));

前端

在http.ts中配置请求拦截器和响应拦截器

// axios请求拦截器
http.interceptors.request.use(config => {
  const token = localStorage.getItem("token")
  config.headers.Authorization = `Bearer ${token}`
  return config
}, e => Promise.reject(e))

// axios响应式拦截器
http.interceptors.response.use(res => {
  const {authorization} = res.headers
  authorization && localStorage.setItem("token",authorization)
  return res.data
}, e => {
  const {status} = e.response
  if(status === 401){
    // 登录过期，重定向到登录页
    localStorage.removeItem("token")
    window.location.href="#/login"
  }
  return Promise.reject(e)
})