背景

在使用 Vue + Element UI 开发后台管理系统时，通常需要在请求头中携带 Token 进行身份认证。Element UI 的默认模板使用 X-Token 作为请求头，但后端可能要求使用其他字段名（如 token 或 Authorization）。

本文记录如何自定义请求头 Token 字段名，以及开发过程中遇到的一些常见问题。

1. 自定义请求头 Token

修改 src/utils/request.js 文件中的拦截器配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import store from '@/store'
import { getToken } from '@/utils/auth'

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求头中添加 token
    if (store.getters.token) {
      // 默认是 config.headers['X-Token'] = getToken()
      // 修改为后端要求的字段名
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

说明：

  • store.getters.token 从 Vuex 中获取当前用户的 Token
  • config.headers['token'] 设置请求头字段名为 token
  • 如果后端要求 Bearer Token，可以改为：config.headers['Authorization'] = 'Bearer ' + getToken()

2. ESLint 缩进错误解决

在修改代码时，ESLint 可能会报缩进错误：

1
Expected indentation of 4 spaces but found 6

解决方案： 在 .eslintrc.js 的 rules 中添加：

1
2
3
4
5
6
rules: {
  // 关闭函数括号前空格检查
  'space-before-function-paren': 0,
  // 关闭缩进检查
  'indent': 'off'
}

3. 修改响应码判断

Element UI 模板默认使用 20000 作为成功码，如果后端返回的是标准 HTTP 状态码 200，需要修改：

1
2
3
4
5
6
7
8
9
// src/utils/request.js

response => {
  const res = response.data
  // 将 20000 改为 200
  if (res.code !== 200) {
    // 错误处理...
  }
}

4. 跨域问题

如果前端和后端不在同一个域名下，会遇到跨域问题。

开发环境解决方案： 配置 Vue CLI 代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',  // 后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

生产环境解决方案： 由后端配置 CORS 响应头

1
2
3
Access-Control-Allow-Origin: https://your-frontend.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, token

总结

问题 解决方案
自定义 Token 字段名 修改 config.headers['token']
ESLint 缩进报错 关闭 indent 规则
响应码不匹配 修改成功码判断条件
跨域问题 开发环境用代理，生产环境用 CORS