VueJS集成Django REST API：登录后密钥存储方式咨询

嘿，我来帮你梳理下这个令牌存储的问题！结合你用Vue.js + Axios + Django REST Auth的场景，有几种实用的方案，我给你逐个拆解，附带上代码示例：

1. localStorage：持久化存储（适合需要记住登录状态的场景） #

localStorage会把令牌存在浏览器本地，即使用户关闭浏览器再打开，令牌依然保留，适合需要“记住我”的功能。不过要注意，它有XSS攻击风险（如果页面被注入恶意脚本，能读取到localStorage里的内容），所以要确保你的Vue项目做好了XSS防护（比如避免使用v-html渲染不可信内容、对用户输入做转义等）。

代码示例： #

• 登录成功后存储令牌：

// 假设登录接口返回的响应数据是 { key: "你的令牌字符串" }
axios.post('/api/auth/login/', { username: 'xxx', password: 'xxx' })
  .then(response => {
    const token = response.data.key;
    // 存储到localStorage
    localStorage.setItem('authToken', token);
  })
  .catch(error => {
    console.error('登录失败', error);
  });

• 请求时自动携带令牌（用Axios拦截器）：

// 在Axios实例中添加请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken');
  if (token) {
    // Django REST Auth的Token认证格式是 "Token 令牌字符串"
    config.headers.Authorization = `Token ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

2. sessionStorage：会话级存储（适合临时登录场景） #

sessionStorage的生命周期和当前浏览器标签页绑定，关闭标签页后令牌就会被清除，安全性比localStorage稍高（因为不会跨标签页共享，也不会持久化到磁盘），但缺点是用户刷新页面或者新开标签页都需要重新登录。

代码示例： #

• 存储令牌：

axios.post('/api/auth/login/', { username: 'xxx', password: 'xxx' })
  .then(response => {
    const token = response.data.key;
    sessionStorage.setItem('authToken', token);
  });

• Axios拦截器和上面localStorage的写法一致，只是把localStorage换成sessionStorage即可。

3. Vuex/Pinia + 持久化插件（推荐，状态管理+持久化兼顾） #

如果你的Vue项目用了状态管理工具（Vue2用Vuex，Vue3用Pinia），可以把令牌存在状态管理里，再配合持久化插件（比如pinia-plugin-persistedstate或者vuex-persistedstate），让状态自动同步到localStorage/sessionStorage，既方便在组件中获取令牌，又能实现持久化。

Pinia示例（Vue3）： #

1. 先安装持久化插件：

npm install pinia-plugin-persistedstate

2. 创建Pinia store：

// stores/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: null
  }),
  actions: {
    setToken(newToken) {
      this.token = newToken;
    },
    clearToken() {
      this.token = null;
    }
  },
  // 配置持久化，默认存在localStorage
  persist: true
});

3. 登录时更新store：

import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();

axios.post('/api/auth/login/', { username: 'xxx', password: 'xxx' })
  .then(response => {
    const token = response.data.key;
    authStore.setToken(token);
  });

4. Axios拦截器从store拿令牌：

import { useAuthStore } from '@/stores/auth';

axios.interceptors.request.use(config => {
  const authStore = useAuthStore();
  if (authStore.token) {
    config.headers.Authorization = `Token ${authStore.token}`;
  }
  return config;
});

额外提醒：关于Cookie的疑问 #

你提到“猜测可能需要自行存储Cookie”，其实Django REST Auth的TokenAuthentication默认是返回令牌字符串（在响应的key字段里），而不是设置HttpOnly Cookie。如果你的后端配置了SessionAuthentication或者JWT的Cookie存储，那浏览器会自动管理Cookie，但如果是用TokenAuth，就需要自己存储令牌字符串啦。

另外，如果追求更高的安全性，也可以考虑让后端把令牌放在HttpOnly Cookie里（需要后端配置），这样前端不需要手动存储，浏览器会自动在请求时带上Cookie，而且XSS脚本无法读取HttpOnly Cookie，安全性更高。不过这种方式需要后端配合调整认证方式哦。

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