求助：如何在Vue中缓存从NodeJS获取的accessToken用于Axios请求

当然可行！这是前后端分离项目里非常标准的鉴权落地方案，我帮你梳理具体的实现步骤和注意事项：

一、浏览器缓存Token的几种方式 #

前端常用的浏览器缓存方案有三种，你可以根据业务需求选择：

• localStorage：持久化存储，除非手动清除或代码删除，否则会一直留在浏览器中，适合长期保存用户登录状态的场景
• sessionStorage：会话级存储，关闭浏览器标签页后就会失效，适合临时登录的场景
• Cookie：可以设置过期时间，支持HttpOnly属性（能防范XSS攻击），如果后端有相关要求可以用这种方式

缓存Token的代码示例 #

拿到Node端返回的accessToken后，直接用下面的代码存入缓存：

// 用localStorage存储
localStorage.setItem('accessToken', 你的token值);

// 用sessionStorage存储
sessionStorage.setItem('accessToken', 你的token值);

// 用Cookie存储（需要手动设置或借助js-cookie库）
document.cookie = `accessToken=${你的token值}; expires=${过期时间}; path=/;`;

二、配置Axios自动携带Token到请求头 #

你可以通过Axios的请求拦截器，在每次发送请求前自动从缓存中取出Token并添加到请求头里，这样就不用每次手动写了：

1. 创建Axios实例（推荐在Vue项目中单独封装） #

在src/utils/request.js（或你自定义的文件）里封装Axios：

import axios from 'axios';

// 创建Axios实例
const request = axios.create({
  baseURL: '/api', // 替换成你的Node端接口前缀
  timeout: 10000,
});

// 请求拦截器：自动添加Token
request.interceptors.request.use(
  (config) => {
    // 从缓存中获取Token
    const token = localStorage.getItem('accessToken');
    if (token) {
      // 注意这里的请求头字段要和后端约定好，通常是Authorization，格式为Bearer + 空格 + Token
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 可选：响应拦截器，处理Token过期等情况
request.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // 如果后端返回401（未授权），说明Token过期或无效，清除缓存并跳转到登录页
    if (error.response?.status === 401) {
      localStorage.removeItem('accessToken');
      // 跳转到登录页，Vue3用router.push，Vue2用this.$router.push
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default request;

2. 在Vue组件中使用封装好的Axios #

之后在组件里直接导入这个实例发请求即可，Token会自动带上：

<script setup>
import request from '@/utils/request';

// 示例：发送带Token的请求
const fetchData = async () => {
  try {
    const res = await request.get('/your-api-path');
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
};
</script>

三、关键注意事项 #

• 安全性：如果你的项目对安全性要求较高，建议使用带有HttpOnly属性的Cookie存储Token，能有效防范XSS攻击；如果用localStorage，要做好前端的XSS防护（比如过滤用户输入）
• Token过期处理：记得在响应拦截器里处理后端返回的Token过期状态（比如401），及时清除缓存并引导用户重新登录
• 跨域问题：如果Node端和Vue端存在跨域，要确保后端配置了CORS，允许携带自定义请求头（比如Authorization）

内容的提问来源于stack exchange，提问作者alireza javanmardi