React+Node.js实现双Token无感刷新

在node中创建一个文件

然后需要下载一个配置

npm i jsonwebtoken

然后进行导入

var express = require("express");
var router = express.Router();
var jwt = require("jsonwebtoken");

导入完成后，接下来进入主题

// 验证身份令牌，实现无感刷新Token
const verifyAuthToken = (req, res, next) => {
  const accessToken = req.headers["authorization"];
  const refreshToken = req.headers["pass"];
  if (!accessToken) {
    return res.status(400).json({ msg: "身份令牌未提供！" });
  }
  jwt.verify(accessToken, "accessToken", (err, decoded) => {
    if (err) {
      if (err.name === "TokenExpiredError") {
        jwt.verify(refreshToken, "refreshToken", (err, decoded) => {
          if (err) {
            return res
              .status(403)
              .json({ msg: "refreshToken过期，请重新登录" });
          }
          let id = decoded.id;
          let newAccessToken = jwt.sign({ id }, "accessToken", {
            expiresIn: "6h",
          });
          let newRefreshToken = jwt.sign({ id }, "refreshToken", {
            expiresIn: "5d",
          });
          return res.status(401).json({
            accessToken: newAccessToken,
            refreshToken: newRefreshToken,
            msg: "新的令牌",
          });
        });
      }
      return res.status(400).json({ msg: "身份验证失败" });
    } else {
      req.user = decoded;
      next();
    }
  });
};

以上是Node.js的代码

然后再react中创建一个文件夹与文件，用来给axios进行二次封装

紧接着创建一个响应拦截器

// 添加响应拦截器
$http.interceptors.response.use(response => {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response.data
},
  async error => {

    const originalRequest = error.config
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      try {
        localStorage.setItem('accessToken', error.response.data.accessToken)
        localStorage.setItem('refreshToken', error.response.data.refreshToken)

        originalRequest.headers.Authorization = error.response.data.accessToken
        originalRequest.headers.pass = error.response.data.refreshToken
        return $http(originalRequest)
      } catch (error) {
        return Promise.reject(error)
      };
    }
    console.log(error);
    window.location.href = '/login'

    return Promise.reject(error);
  });

下面是创建一个请求拦截器进行拦截验证token

// axios 第二次封装
import axios from 'axios'

const $http = axios.create({
  baseURL: "",   // 默认路由前缀
  timeout: 60000, // 设置超时时间
  headers: {
    'Content-Type': 'application/json' // 设置默认请求头
  }
})

// 添加请求拦截器
$http.interceptors.request.use(config => {

  // 对token进行处理
  const accessToken = localStorage.getItem('accessToken')
  if (accessToken) {
    config.headers.Authorization = accessToken
  }


  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

创建完成后进行调用存储

现在整体算是完成

使用它的方式是采用路由后直接调用，不需要其他的操作