Vue.js中如何存储session_id以标识无认证API请求的同一用户？

问题描述 #

我有一个简单的Vue应用，需要向API发起请求。由于没有认证机制，我需要确保在Vue应用生命周期（即浏览器开启期间），应用能获取一个唯一标识并发送给服务器，让API识别出是同一「用户」在发起请求。

作为Vue新手，我不确定该如何实现。我的初步想法是在/src/App.vue这类全局文件中添加如下代码：

if(!window.localStorage.getItem('session_id')){
    let random = Array(5).fill().map(n=>(Math.random()*36|0).toString(36)).join('')
    window.localStorage.setItem('session_id', random)
}

然后在发起API请求时，按如下方式携带该标识：

//pseudo code
request.header('session_id', window.localStorage.getItem('session_id')).get('endpoint1')    

请问这种方式是否可行？或者有更优的方案？

你的方案可行性分析 #

你的方案完全可行，能满足“让API识别同一浏览器会话用户”的基本需求，但存在几个可以优化的点：

• 持久化不匹配：localStorage是持久化存储，即使关闭浏览器再打开，这个session_id依然存在。如果你的需求只是「浏览器开启期间」的标识，用sessionStorage更合适——它的生命周期和当前浏览器标签页绑定，关闭标签或浏览器就会自动清除，完全贴合你的场景。
• ID唯一性有风险：你生成的5位36进制字符串（最多约600万种组合），小流量场景下重复概率低，但用户量较大时可能出现重复。可以改用浏览器原生的crypto API生成更安全随机的字符串：

  const generateSessionId = () => {
    return Array.from(crypto.getRandomValues(new Uint8Array(8)))
      .map(b => b.toString(36).padStart(2, '0'))
      .join('');
  }
  

• 请求代码冗余：每次请求手动添加session_id header太繁琐，建议用请求拦截器统一处理。比如基于Axios封装：

  // src/utils/request.js
  import axios from 'axios';
  
  const request = axios.create({
    baseURL: '/api'
  });
  
  // 请求拦截器自动注入session_id
  request.interceptors.request.use(config => {
    let sessionId = sessionStorage.getItem('session_id');
    if (!sessionId) {
      sessionId = Array.from(crypto.getRandomValues(new Uint8Array(8)))
        .map(b => b.toString(36).padStart(2, '0'))
        .join('');
      sessionStorage.setItem('session_id', sessionId);
    }
    config.headers['session_id'] = sessionId;
    return config;
  });
  
  export default request;
  

  这样所有请求都会自动带上标识，无需每次手动设置。

更优方案总结 #

1. 存储选型：用sessionStorage替代localStorage，严格匹配「浏览器开启期间」的会话生命周期。
2. ID生成：使用crypto API生成更安全、唯一的会话ID，避免重复风险。
3. 全局拦截：通过请求拦截器统一注入标识，减少冗余代码，确保所有请求都能带上会话ID。

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