无感刷新不费力，双token完美实现，后端亲传代码Get!

前端

2023-08-28 19:52:06

无感刷新：双令牌机制的终极指南

什么是无感刷新？

无感刷新是一种前端技术，旨在为用户提供无缝的页面体验。它允许用户在页面上进行操作，无需等待页面重新加载或刷新。这创造了一种类似于单页应用程序的体验，但使用的是传统的多页应用程序模型。

双令牌机制

无感刷新的关键在于双令牌机制。它使用两个不同的令牌：

访问令牌 (accessToken) ：用于对每个请求进行身份验证。
刷新令牌 (refreshToken) ：用于请求新的访问令牌。

实现流程

用户登录并接收访问令牌和刷新令牌。
访问令牌存储在 cookie 中，用于验证后续请求。
刷新令牌存储在 localStorage 中，用于在访问令牌过期后获取新的访问令牌。
当访问令牌过期时，前端向后端请求新的访问令牌，并使用刷新令牌进行身份验证。
后端验证刷新令牌并颁发新的访问令牌。

前端代码（Vue3 + Vite + axios）

安装 axios

npm install axios

创建 axios 实例

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:3000",
  timeout: 10000,
});

在请求拦截器中添加访问令牌

instance.interceptors.request.use((config) => {
  const accessToken = localStorage.getItem("accessToken");
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`;
  }
  return config;
});

在响应拦截器中处理访问令牌过期

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response && error.response.status === 401) {
      // 访问令牌过期，使用刷新令牌请求新的访问令牌
      const refreshToken = localStorage.getItem("refreshToken");
      if (refreshToken) {
        return instance
          .post("/refresh", { refreshToken })
          .then((res) => {
            // 更新访问令牌和刷新令牌
            localStorage.setItem("accessToken", res.data.accessToken);
            localStorage.setItem("refreshToken", res.data.refreshToken);
            // 重新发送请求
            return instance(error.config);
          })
          .catch((err) => {
            // 刷新令牌也过期了，需要重新登录
            window.location.href = "/login";
          });
      } else {
        // 刷新令牌也过期了，需要重新登录
        window.location.href = "/login";
      }
    }
    return Promise.reject(error);
  }
);

后端代码（koa2）

创建 koa2 实例

const Koa = require("koa");
const app = new Koa();

定义登录接口

app.post("/login", async (ctx) => {
  const { username, password } = ctx.request.body;
  if (username === "admin" && password === "123456") {
    const accessToken = jwt.sign({ username }, "secret", { expiresIn: "1h" });
    const refreshToken = jwt.sign({ username }, "secret", { expiresIn: "7d" });
    ctx.body = { accessToken, refreshToken };
  } else {
    ctx.status = 401;
    ctx.body = "Unauthorized";
  }
});

定义刷新访问令牌接口

app.post("/refresh", async (ctx) => {
  const { refreshToken } = ctx.request.body;
  if (refreshToken) {
    const decoded = jwt.verify(refreshToken, "secret");
    const accessToken = jwt.sign({ username: decoded.username }, "secret", { expiresIn: "1h" });
    ctx.body = { accessToken };
  } else {
    ctx.status = 401;
    ctx.body = "Unauthorized";
  }
});