在前后端分离架构中，Vue 前端配合 Axios 发起请求，Node.js（Express）搭建后端服务时，可实现 Token 无感刷新以提升用户体验。具体而言，前端 Vue 项目通过 Axios 拦截器，在每次请求前检查 Token 状态。若 Token 即将过期，先向服务端发起静默刷新请求，Express 后端验证旧 Token 后颁发新 Token。前端拦截器收到新 Token 后，将其更新到本地存储，并重新发起原请求，整个过程对用户透明，无需手动重新登录。

1. 初始化 Axios 实例（api/index.js）

封装请求 / 响应拦截器，处理 Token 携带、刷新和重试逻辑:

import axios from 'axios';

import { ElMessage } from 'element-plus'; // 按需引入 UI 组件库提示（可选）


// 1. 创建 Axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 环境变量配置后端地址
  timeout: 5000, // 请求超时时间
});

// 2. Token 存取工具函数（安全存储建议用 HttpOnly Cookie，此处用 localStorage 演示）
const TokenKey = {

  ACCESS: 'access_token',

  REFRESH: 'refresh_token',
};


// 获取 Token
const getAccessToken = () => localStorage.getItem(TokenKey.ACCESS);
const getRefreshToken = () => localStorage.getItem(TokenKey.REFRESH);
// 存储新 Token
const setTokens = (accessToken, refreshToken) => {
  localStorage.setItem(TokenKey.ACCESS, accessToken);
  localStorage.setItem(TokenKey.REFRESH, refreshToken);

};
// 清除 Token（退出登录用）
const removeTokens = () => {
  localStorage.removeItem(TokenKey.ACCESS);

  localStorage.removeItem(TokenKey.REFRESH);
};

// 3. 刷新状态管理（防止并发请求重复刷新 Token）
let isRefreshing = false; // 是否正在刷新 Token
let requestQueue = []; // 等待刷新完成的请求队列

// 4. 请求拦截器：自动给所有请求添加 Access Token
service.interceptors.request.use(

  (config) => {
    const token = getAccessToken();
    if (token) {
      // 规范格式：Bearer + 空格 + Token（后端需对应解析）
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 5. 响应拦截器：处理 Token 过期逻辑

service.interceptors.response.use(
  (response) => response.data, // 直接返回响应体，简化业务层调用
  async (error) => {

    const { response, config } = error;
    const originalRequest = config; // 原始失败请求

    // 仅处理 401 状态码（Access Token 过期/无效），且排除刷新 Token 本身的请求
    if (response?.status === 401 && originalRequest.url !== '/auth/refresh') {
      // 避免重复刷新：正在刷新时，将请求加入队列
      if (isRefreshing) {
        return new Promise((resolve) => {
          requestQueue.push(() => {
            // 刷新成功后，用新 Token 重试原始请求
            originalRequest.headers.Authorization = `Bearer ${getAccessToken()}`;
            resolve(service(originalRequest));
          });
        });
      }

      originalRequest._retry = true; // 标记该请求已进入重试流程
      isRefreshing = true; // 开启刷新状态


      try {
        // 调用后端刷新接口，用 Refresh Token 换取新 Token
        const refreshToken = getRefreshToken();
        if (!refreshToken) {

          throw new Error('Refresh Token 不存在');
        }

        const refreshRes = await service.post('/auth/refresh', {
          refreshToken, // 传给后端的 Refresh Token
        });

        // 存储新 Token
        const { accessToken, refreshToken: newRefreshToken } = refreshRes;
        setTokens(accessToken, newRefreshToken);

        // 重试队列中所有等待的请求
        requestQueue.forEach((callback) => callback());
        requestQueue = []; // 清空队列

        // 重试当前失败的请求

        originalRequest.headers.Authorization = `Bearer ${accessToken}`;
        return service(originalRequest);
      } catch (refreshError) {
        // 刷新失败（Refresh Token 过期/无效），强制跳转登录页
        removeTokens(); // 清除本地无效 Token
        ElMessage.error('登录已过期，请重新登录');
        window.location.href = '/login'; // 跳转到登录页
        return Promise.reject(refreshError);
      } finally {
        isRefreshing = false; // 关闭刷新状态

      }
    }

    // 非 401 错误（如网络错误、业务错误），直接抛出

    ElMessage.error(error.message || '请求失败');
    return Promise.reject(error);
  }
);

export default service;


2. 登录与业务请求示例（api/user.js）

import service from './index';

// 登录：获取初始双 Token
export const login = (username, password) => {
  return service.post('/auth/login', { username, password });

};

// 业务请求示例（无需手动处理 Token）

export const getUserInfo = () => {

  return service.get('/user/info');
};

// 退出登录：清除 Token

export const logout = () => {
  localStorage.removeItem('access_token');

  localStorage.removeItem('refresh_token');
  window.location.href = '/login';
};


3. 登录页面使用示例（Login.vue）

<template>
  <div>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>

  </div>
</template>


<script setup>
import { ref } from 'vue';
import { login } from '@/api/user';
import { ElMessage } from 'element-plus';

const username = ref('');
const password = ref('');

const handleLogin = async () => {
  try {
    // 调用登录接口，后端返回 accessToken 和 refreshToken
    const res = await login(username.value, password.value);
    // 存储 Token（实际已在 api 拦截器中处理，此处简化）
    localStorage.setItem('access_token', res.accessToken);
    localStorage.setItem('refresh_token', res.refreshToken);

    ElMessage.success('登录成功');
    window.location.href = '/home'; // 跳转到首页

  } catch (error) {
    ElMessage.error('登录失败，请检查账号密码');
  }
};
</script>


三、后端实现（Node.js + Express）

npm install express jsonwebtoken redis cors dotenv // 核心依赖

require('dotenv').config();

module.exports = {

  // JWT 密钥（生产环境需用环境变量，避免硬编码）
  JWT_SECRET: process.env.JWT_SECRET || 'your-secret-key-321',
  // Token 有效期
  ACCESS_TOKEN_EXPIRES: '1h', // 1 小时
  REFRESH_TOKEN_EXPIRES: '7d', // 7 天
  // Redis 配置（存储 Refresh Token，防止重复使用）
  REDIS: {
    host: 'localhost',

    port: 6379,
    db: 0,
  },
};


4. Redis 工具函数（utils/redis.js）

5. 核心接口实现（routes/auth.js）

const express = require('express');

const cors = require('cors');
const authRouter = require('./routes/auth');

const app = express();
const port = 3001;

// 跨域配置（生产环境需限制 origin）

app.use(cors());
// 解析 JSON 请求体
app.use(express.json());

// 挂载路由
app.use('/api/auth', authRouter);


// 启动服务
app.listen(port, () => {
  console.log(`后端服务启动成功：http://localhost:${port}`);
});


四、关键注意事项（生产环境必看）

Vue + Axios + Node.js（Express）如何实现无感刷新Token？

在前后端分离架构中，Vue 前端配合 Axios 发起请求，Node.js（Express）搭建后端服务时，可实现 Token 无感刷新以提升用户体验。具体而言，前端 Vue 项目通过 Axios 拦截器，在每次请求前检查 Token 状态。若 Token 即将过期，先向服务端发起静默刷新请求，Express 后端验证旧 Token 后颁发新 Token。前端拦截器收到新 Token 后，将其更新

编程语言

开发工具

Vue+Node.js实现Token无感刷新方案，前端通过Axios拦截器自动检测Token状态，静默刷新避免用户重复登录。采用JWT双Token机制，AccessToken短期有效，RefreshToken长期存储于Redis。详细代码示例涵盖Vue3请求封装、Express后端实现及安全注意事项，提升Web应用安全性和用户体验。

身份验证

单点登录

数据库

MongoDB

路由

MySQL

Redis

JSON

云数据库采购特惠，高性能、高可靠、高安全，超值优惠等你享！


mongodb

11.11畅享AI算力 云启新增长

tencentdb-catalog

人脸核身+人脸识别特惠活动0.6折起


faceid

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

Vue+Node.js实现Token无感刷新方案，前端通过Axios拦截器自动检测Token状态，静默刷新避免用户重复登录。采用JWT双Token机制，AccessToken短期有效，RefreshToken长期存储于Redis。详细代码示例涵盖Vue3请求封装、Express后端实现及安全注意事项，提升Web应用安全...

Vue + Axios + Node.js（Express）如何实现无感刷新Token？

Vue + Axios + Node.js（Express）如何实现无感刷新Token？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐