在前端vue中如何获取后端传过来的cookie和session

在Vue.js中，要获取后端通过HTTP响应头传递的Cookie和Session，你可以按照以下步骤操作：

1. **使用axios等HTTP库**:
- 首先，确保你在项目中已经安装了axios（`npm install axios` 或 `yarn add axios`）或其他支持拦截器的HTTP库。
- 创建一个全局的axios实例，并配置一个请求拦截器，用于处理响应头。

import axios from 'axios';

axios.interceptors.response.use(response => {
  // 检查是否有cookie和session信息
  const cookies = response.headers['set-cookie'] || [];
  const session = response.headers['x-session-id'] || null; // 如果后端使用自定义字段名

  // 将cookie和session存储到Vue的原型上或者Vuex store中供全局访问
  Vue.prototype.$cookies = cookies;
  Vue.prototype.$session = session;

  return response.data;
}, error => {
  // 处理错误...
});

// 现在可以在组件里直接使用 $cookies 和 $session

2. **手动设置** (适用于简单的场景)：
- 如果不想使用axios，可以直接在每次发送请求之前检查response headers。例如在发送每个API请求时添加这一步骤。

function myRequest(url) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function () {
    if (xhr.status === 200) {
      const cookies = xhr.getResponseHeader('Set-Cookie') || [];
      const session = xhr.getResponseHeader('X-Session-ID') || null;
      // ...后续处理
    }
  };
  xhr.send();
}