js实现无感刷新的实践(附前后端实现)

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const accessTokenSecret = 'YOUR_ACCESS_TOKEN_SECRET';
const refreshTokenSecret = 'YOUR_REFRESH_TOKEN_SECRET';
let refreshTokens = [];

app.post('/login', (req, res) => {
    // 用户登录逻辑，验证用户凭证
    const { username, password } = req.body;

    // 这里应该有逻辑来验证用户凭证
    // 如果验证成功：
    const accessToken = jwt.sign({ username }, accessTokenSecret, { expiresIn: '15m' });
    const refreshToken = jwt.sign({ username }, refreshTokenSecret);
    refreshTokens.push(refreshToken);

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

app.post('/refresh', (req, res) => {
    // 用户发送refresh token来获取新的access token
    const { refreshToken } = req.body;
    if (!refreshToken || !refreshTokens.includes(refreshToken)) {
        return res.sendStatus(403);
    }

    jwt.verify(refreshToken, refreshTokenSecret, (err, user) => {
        if (err) {
            return res.sendStatus(403);
        }

        const newAccessToken = jwt.sign({ username: user.username }, accessTokenSecret, { expiresIn: '15m' });

        res.json({
            accessToken: newAccessToken
        });
    });
});

app.listen(3000, () => {
    console.log('Authentication service started on port 3000');
});

axios.interceptors.response.use(response => {
    return response;
}, error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;
        return axios.post('/refresh', {
            refreshToken: localStorage.getItem('refreshToken')
        }).then(res => {
            if (res.status === 200) {
                localStorage.setItem('accessToken', res.data.accessToken);
                axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('accessToken');
                return axios(originalRequest);
            }
        });
    }

    return Promise.reject(error);
});

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');
const User = require('./models/User'); // 导入User模型
const RefreshToken = require('./models/RefreshToken'); // 导入RefreshToken模型
const app = express();

// ...其他必要的中间件和数据库连接代码...

app.post('/login', async (req, res) => {
    // 用户登录逻辑，验证用户凭证
    const { username, password } = req.body;
    const user = await User.findOne({ username });

    if (user && bcrypt.compareSync(password, user.password)) {
        const accessToken = jwt.sign({ userId: user._id }, accessTokenSecret, { expiresIn: '15m' });
        const refreshToken = jwt.sign({ userId: user._id }, refreshTokenSecret);

        // 保存refresh token到数据库
        const newRefreshToken = new RefreshToken({ token: refreshToken, user: user._id });
        await newRefreshToken.save();

        res.json({ accessToken, refreshToken });
    } else {
        res.status(401).send('Username or password incorrect');
    }
});

app.post('/refresh', async (req, res) => {
    // 用户发送refresh token来获取新的access token
    const { refreshToken } = req.body;
    const dbToken = await RefreshToken.findOne({ token: refreshToken });

    if (!dbToken) {
        return res.status(403).send('Refresh token not found');
    }

    jwt.verify(refreshToken, refreshTokenSecret, async (err, decoded) => {
        if (err) {
            return res.status(403).send('Refresh token invalid');
        }

        // 生成新的access token和refresh token
        const newAccessToken = jwt.sign({ userId: decoded.userId }, accessTokenSecret, { expiresIn: '15m' });
        const newRefreshToken = jwt.sign({ userId: decoded.userId }, refreshTokenSecret);

        // 更新数据库中的refresh token
        dbToken.token = newRefreshToken;
        await dbToken.save();

        res.json({ accessToken: newAccessToken, refreshToken: newRefreshToken });
    });
});

app.listen(3000, () => {
    console.log('Authentication service started on port 3000');
});

axios.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;

    // 检测token过期的错误代码，比如401
    if (error.response.status === 401 && originalRequest.url === '/refresh') {
      // 刷新Token失败，直接登出用户
      logoutUser();
      return Promise.reject(error);
    }

    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      return axios.post('/refresh', { refreshToken: localStorage.getItem('refreshToken') })
        .then(res => {
          if (res.status === 200) {
            // 将新token设置到本地存储和axios默认头部
            localStorage.setItem('accessToken', res.data.accessToken);
            localStorage.setItem('refreshToken', res.data.refreshToken);
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.accessToken;

            // 更新失败请求的头部并重新发送


            originalRequest.headers['Authorization'] = 'Bearer ' + res.data.accessToken;
            return axios(originalRequest);
          }
        })
        .catch(error => {
          // 任何错误都直接登出用户
          logoutUser();
          return Promise.reject(error);
        });
    }

    return Promise.reject(error);
  }
);

function logoutUser() {
  // 清除本地存储和状态，重定向到登录页面
  localStorage.removeItem('accessToken');
  localStorage.removeItem('refreshToken');
  // ...重定向到登录页的代码...
}