前后端分离token时效及token更新的实现方案

实现前后端分离的登录状态保存，保证登录时效，并处理长时间不访问登录状态失效以及长时间访问自动更新登录时效的需求，通常使用JWT（JSON Web Token）和刷新令牌（Refresh Token）机制。以下是一个完整的解决方案：

一、项目结构

1. 初始化Node.js项目并安装必要的依赖。
2. 创建用户注册、登录和刷新令牌的功能。
3. 设置JWT的有效期，并使用刷新令牌来延长用户的登录会话。

1. 初始化项目并安装依赖

mkdir jwt-auth-refresh-example
cd jwt-auth-refresh-example
npm init -y
npm install express body-parser jsonwebtoken bcryptjs

2. 创建项目结构

jwt-auth-refresh-example
├── server.js
├── config.js
└── routes
    └── auth.js

3. 配置JWT和刷新令牌密钥

在config.js中定义JWT和刷新令牌密钥：

module.exports = {
  jwtSecret: 'your_jwt_secret_key', // 替换为您的JWT密钥
  refreshTokenSecret: 'your_refresh_token_secret_key', // 替换为您的刷新令牌密钥
  jwtExpiry: '15m', // JWT有效期
  refreshTokenExpiry: '7d' // 刷新令牌有效期
};

4. 实现用户注册、登录和刷新令牌

在routes/auth.js中实现用户注册、登录和刷新令牌逻辑：

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const config = require('../config');

const router = express.Router();

const users = []; // 临时存储用户
const refreshTokens = []; // 临时存储刷新令牌

// 生成访问令牌
function generateAccessToken(user) {
  return jwt.sign(user, config.jwtSecret, { expiresIn: config.jwtExpiry });
}

// 生成刷新令牌
function generateRefreshToken(user) {
  const refreshToken = jwt.sign(user, config.refreshTokenSecret, { expiresIn: config.refreshTokenExpiry });
  refreshTokens.push(refreshToken);
  return refreshToken;
}

// 注册路由
router.post('/register', async (req, res) => {
  const { username, password } = req.body;

  const existingUser = users.find(user => user.username === username);
  if (existingUser) {
    return res.status(400).json({ message: 'User already exists' });
  }

  const hashedPassword = await bcrypt.hash(password, 10);
  const user = { username, password: hashedPassword };
  users.push(user);

  res.status(201).json({ message: 'User registered successfully' });
});

// 登录路由
router.post('/login', async (req, res) => {
  const { username, password } = req.body;

  const user = users.find(user => user.username === username);
  if (!user) {
    return res.status(400).json({ message: 'Invalid credentials' });
  }

  const isPasswordValid = await bcrypt.compare(password, user.password);
  if (!isPasswordValid) {
    return res.status(400).json({ message: 'Invalid credentials' });
  }

  const accessToken = generateAccessToken({ username: user.username });
  const refreshToken = generateRefreshToken({ username: user.username });

  res.json({ accessToken, refreshToken });
});

// 刷新令牌路由
router.post('/token', (req, res) => {
  const { token } = req.body;
  if (!token) {
    return res.status(401).json({ message: 'No token provided' });
  }
  if (!refreshTokens.includes(token)) {
    return res.status(403).json({ message: 'Invalid refresh token' });
  }

  try {
    const user = jwt.verify(token, config.refreshTokenSecret);
    const accessToken = generateAccessToken({ username: user.username });
    res.json({ accessToken });
  } catch (error) {
    return res.status(403).json({ message: 'Invalid refresh token' });
  }
});

module.exports = router;

5. 保护受保护的路由

在server.js中配置Express应用并保护受保护的路由：

const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const config = require('./config');
const authRoutes = require('./routes/auth');

const app = express();

app.use(bodyParser.json());

app.use('/auth', authRoutes);

// 保护路由中间件
const authenticateJWT = (req, res, next) => {
  const authHeader = req.headers.authorization;
  if (!authHeader) {
    return res.status(401).json({ message: 'Access denied. No token provided.' });
  }

  const token = authHeader.split(' ')[1];
  try {
    const decoded = jwt.verify(token, config.jwtSecret);
    req.user = decoded;
    next();
  } catch (error) {
    return res.status(403).json({ message: 'Invalid token' });
  }
};

// 受保护的路由
app.get('/protected', authenticateJWT, (req, res) => {
  res.json({ message: 'This is a protected route', user: req.user });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

6. 测试API

您可以使用curl或Postman等工具测试API。

注册用户

curl -X POST http://localhost:3000/auth/register -H "Content-Type: application/json" -d '{"username": "testuser", "password": "testpass"}'

登录用户

curl -X POST http://localhost:3000/auth/login -H "Content-Type: application/json" -d '{"username": "testuser", "password": "testpass"}'

登录成功后，您将收到一个JWT访问令牌和一个刷新令牌：

{
  "accessToken": "YOUR_JWT_ACCESS_TOKEN",
  "refreshToken": "YOUR_JWT_REFRESH_TOKEN"
}

访问受保护的路由

使用获取的JWT访问令牌访问受保护的路由：

curl -X GET http://localhost:3000/protected -H "Authorization: Bearer YOUR_JWT_ACCESS_TOKEN"

您将收到受保护路由的响应：

{
  "message": "This is a protected route",
  "user": {
    "username": "testuser",
    "iat": 1600000000,
    "exp": 1600003600
  }
}

刷新访问令牌

使用刷新令牌获取新的访问令牌：

curl -X POST http://localhost:3000/auth/token -H "Content-Type: application/json" -d '{"token": "YOUR_JWT_REFRESH_TOKEN"}'

您将收到新的访问令牌：

{
  "accessToken": "NEW_JWT_ACCESS_TOKEN"
}

总结

通过以上步骤，您可以实现前后端分离的登录状态保存，包括登录时效、长时间不访问登录状态失效以及长时间访问自动更新登录时效。此方案利用了JWT和刷新令牌机制来管理用户会话，确保安全性和用户体验。希望这对您有所帮助。