vue2 从 sessionStorage 手动取 token 后，手动加入到 header

vue2 从 sessionStorage 手动取 token 后，加入到 header

• • • 一、核心思路
    • [二、完整实现（基于 Axios）](#二、完整实现（基于 Axios）)
    • • [步骤 1：安装 Axios（若未安装）](#步骤 1：安装 Axios（若未安装）)
      • [步骤 2：封装 Axios 实例（推荐）](#步骤 2：封装 Axios 实例（推荐）)
      • [步骤 3：在组件/接口中使用封装的请求](#步骤 3：在组件/接口中使用封装的请求)
    • [三、单个请求手动添加 Token（不推荐全局时用）](#三、单个请求手动添加 Token（不推荐全局时用）)
    • 四、关键注意事项
    • [五、手动设置 Token 到 sessionStorage（补充）](#五、手动设置 Token 到 sessionStorage（补充）)

在 Vue 2 中，从 sessionStorage 手动获取 Token 并添加到请求头（Header），核心是在请求拦截器中统一处理（推荐基于 Axios 实现），也可针对单个请求手动配置。以下是完整步骤和示例：

一、核心思路

1. 从 sessionStorage 取 Token ：sessionStorage.getItem('tokenKey')（注意 Token 可能不存在，需做判空）。
2. 添加到请求头 ：
   • 全局统一配置（推荐）：通过 Axios 拦截器，所有请求自动携带 Token。
   • 单个请求手动配置：仅针对特定请求添加 Token。

二、完整实现（基于 Axios）

步骤 1：安装 Axios（若未安装）

npm install axios --save

步骤 2：封装 Axios 实例（推荐）

在项目中新建 src/utils/request.js，封装请求拦截器，统一处理 Token：

// src/utils/request.js
import axios from 'axios'

// 创建 Axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 接口基准地址（可在 .env 文件配置）
  timeout: 5000 // 请求超时时间
})

// 请求拦截器：发送请求前统一添加 Token
service.interceptors.request.use(
  (config) => {
    // 1. 从 sessionStorage 手动获取 Token（假设 Token 存在 sessionStorage 的 'token' 键中）
    const token = window.sessionStorage.getItem('token')
    
    // 2. 若 Token 存在，添加到请求头（常用键名：Authorization，格式一般为 Bearer + Token）
    if (token) {
      // 自定义请求头字段（根据后端要求调整，如 token / Authorization 等）
      config.headers['Authorization'] = 'Bearer ' + token 
      // 若后端要求直接传 token，可写：config.headers['token'] = token
    }
    
    return config // 返回配置，继续发送请求
  },
  (error) => {
    // 请求错误处理
    console.error('请求拦截器错误：', error)
    return Promise.reject(error)
  }
)

// 响应拦截器（可选，处理返回结果）
service.interceptors.response.use(
  (response) => {
    // 简化返回数据，只取 data 部分
    return response.data
  },
  (error) => {
    console.error('响应错误：', error)
    // 可在此处理 Token 过期（如 401 状态码），跳转到登录页
    if (error.response?.status === 401) {
      // 清除无效 Token
      window.sessionStorage.removeItem('token')
      // 跳转到登录页（结合 Vue Router）
      window.location.href = '/login' 
      // 若用 Vue Router：this.$router.push('/login')（需确保能访问到 router 实例）
    }
    return Promise.reject(error)
  }
)

// 导出封装后的 Axios 实例
export default service

步骤 3：在组件/接口中使用封装的请求

1. 新建接口文件 （如 src/api/user.js），统一管理接口：

// src/api/user.js
import request from '@/utils/request'

// 示例：获取用户信息（自动携带 Token）
export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get'
  })
}

// 示例：提交表单（自动携带 Token）
export function submitForm(data) {
  return request({
    url: '/form/submit',
    method: 'post',
    data
  })
}

2. 在 Vue 组件中调用接口：

<template>
  <div>
    <button @click="getUserInfo">获取用户信息</button>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'

export default {
  methods: {
    async getUserInfo() {
      try {
        const res = await getUserInfo()
        console.log('用户信息：', res)
        // 处理业务逻辑
      } catch (error) {
        console.error('获取用户信息失败：', error)
      }
    }
  }
}
</script>

三、单个请求手动添加 Token（不推荐全局时用）

若仅需给某个请求单独加 Token，可直接在请求配置中手动设置：

import axios from 'axios'

// 单个请求手动加 Token
async function fetchData() {
  // 1. 手动取 Token
  const token = window.sessionStorage.getItem('token')
  
  try {
    const res = await axios({
      url: 'https://api.example.com/data',
      method: 'get',
      // 2. 手动添加到 header
      headers: {
        'Authorization': token ? 'Bearer ' + token : '',
        'Content-Type': 'application/json'
      }
    })
    console.log('请求结果：', res)
  } catch (error) {
    console.error('请求失败：', error)
  }
}

四、关键注意事项

1. Token 格式 ：后端通常要求 Bearer + 空格 + Token（如 Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...），需确认后端要求的格式，避免格式错误导致鉴权失败。
2. Token 判空 ：若 sessionStorage 中无 Token（如未登录），需避免添加空值到 header，否则可能触发后端无效请求。
3. 跨域问题 ：若接口跨域，需确保后端配置了允许的请求头（如 Access-Control-Allow-Headers: Authorization, token），否则浏览器会拦截请求。
4. Token 过期处理：在响应拦截器中监听 401/403 状态码，清除无效 Token 并跳转登录页。
5. sessionStorage 兼容性：浏览器环境下可用，若为 SSR（如 Nuxt.js），需区分客户端/服务端（服务端无 window 对象）。

五、手动设置 Token 到 sessionStorage（补充）

通常 Token 是登录后从后端获取，再存入 sessionStorage：

// 登录成功后，将后端返回的 Token 存入 sessionStorage
async function login(username, password) {
  const res = await axios.post('/login', { username, password })
  if (res.code === 200) {
    // 存入 Token（键名与取 Token 时保持一致）
    window.sessionStorage.setItem('token', res.data.token)
  }
}

通过以上方式，即可实现 Vue 2 中手动从 sessionStorage 取 Token 并添加到请求头的需求，全局拦截器方式能最大程度减少重复代码，是实际项目中最常用的方案。