无感刷新token(vue3与nodejs版本)

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const accessTokenSecret = 'your-access-token-secret';
const refreshTokenSecret = 'your-refresh-token-secret';
const users = [
  { username: 'admin', password: 'password' },
  // 可在此处添加更多用户
];

// 登录接口，验证用户名和密码，生成并返回访问令牌和刷新令牌
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => {
    return u.username === username && u.password === password;
  });
  if (user) {
    const accessToken = jwt.sign({ username: user.username }, accessTokenSecret, { expiresIn: '30s' });
    const refreshToken = jwt.sign({ username: user.username }, refreshTokenSecret);
    res.json({ accessToken, refreshToken });
  } else {
    res.status(401).json({ error: '用户名或密码错误' });
  }
});

// 使用 JSON 解析器中间件解析请求体
app.use(express.json());
// 刷新令牌接口
app.post('/token', (req, res) => {
  // 从请求体中获取刷新令牌
  const { refreshToken } = req.body;
  // 如果刷新令牌不存在，则返回 401 状态码
  if (!refreshToken) {
    return res.sendStatus(401);
  }
  // 验证刷新令牌，并获取用户信息
  jwt.verify(refreshToken, refreshTokenSecret, (err, user) => {
    // 如果刷新令牌验证失败，则返回 403 状态码
    if (err) {
      return res.sendStatus(403);
    }
    // 生成新的访问令牌，并将其返回给客户端
    const accessToken = jwt.sign({ username: user.username }, accessTokenSecret, { expiresIn: '30s' });
    res.json({ accessToken });
  });
});
// 启动服务器
app.listen(3000, () => {
  console.log('服务器正在运行，端口：3000');
});

<template>
  <div>
    <h1>无感刷新 Token 示例</h1>
    <div v-if="accessToken">
      <p>访问令牌：{{ accessToken }}</p>
      <p>刷新令牌：{{ refreshToken }}</p>
    </div>
    <button v-if="!accessToken" @click="login">登录</button>
    <button v-if="accessToken" @click="refreshToken">刷新令牌</button>
  </div>
</template>
<script>
import { reactive } from 'vue';
import axios from 'axios';
export default {
  setup() {
    const state = reactive({
      accessToken: '',
      refreshToken: ''
    });
    const login = () => {
      axios.post('http://localhost:3000/login', { username: 'admin', password: 'password' })
        .then(response => {
          state.accessToken = response.data.accessToken;
          state.refreshToken = response.data.refreshToken;
        })
        .catch(error => {
          console.error(error);
        });
    };
    const refreshToken = () => {
      axios.post('http://localhost:3000/token', { refreshToken: state.refreshToken })
        .then(response => {
          state.accessToken = response.data.accessToken;
        })
        .catch(error => {
          console.error(error);
        });
    };
    return {
      ...state,
      login,
      refreshToken
    };
  }
};
</script>