面试题：Vue项目中如何在拦截器中处理网络请求的通用参数

1. 在请求拦截器中统一处理添加参数的方法

在Vue项目中，通常在main.js文件中配置axios的请求拦截器。假设已经安装并引入了axios，示例代码如下：

import axios from 'axios'
import Vue from 'vue'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 例如：'/api'
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(config => {
  // 假设token和userId存储在Vuex中，先获取它们
  const token = Vue.prototype.$store.getters.token
  const userId = Vue.prototype.$store.getters.userId
  // 如果token存在，添加到请求头中
  if (token) {
    config.headers['token'] = token
  }
  // 如果userId存在，添加到请求头或者请求参数中（这里以请求头为例）
  if (userId) {
    config.headers['userId'] = userId
  }
  return config
}, error => {
  return Promise.reject(error)
})

export default service

2. 这样做的好处

代码复用性高：通过在请求拦截器统一添加参数，避免了在每个需要发送请求的地方都手动添加token和userId，减少了重复代码，提高了代码的可维护性。当需要修改参数的添加逻辑或者参数名称时，只需要在拦截器中修改一处代码即可。
易于管理和维护：集中处理参数添加逻辑，使得整个项目的请求参数管理更加清晰明了。例如，如果需要对token进行一些额外的处理，如加密等，只需要在拦截器中相应的位置添加处理逻辑，而不需要在所有请求处进行修改。
提高安全性：在请求拦截器中统一添加token，可以确保每个请求都携带了身份验证信息，有助于保证接口的安全性。同时，也方便对token的有效期等进行统一管理和处理。

星途面试题库

面试题：Vue项目中如何在拦截器中处理网络请求的通用参数

知识考点

面试题答案

1. 在请求拦截器中统一处理添加参数的方法

2. 这样做的好处