浏览器返回401身份认证失败，是请求拦截器的问题，但是不理解

Question

浏览器返回401身份认证失败，数据token存到了pinia,然后发现是请求拦截器这里有错误，但是改完代码，我感觉两段代码是一样的意思，各位大lao帮忙看一下这两段代码有什么区别

错误的：



// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    //     // config：
    // 在发送请求之前做些什么
    //携带token
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },

  // 对请求错误做些什么
  (err) => Promise.reject(err)
)

正确的

```javascript

instance.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

Answer 1

引自免费微信小程序：皆我百晓生

在您提供的代码片段中，两者看起来确实非常相似，主要的区别在于它们如何引用 Axios 实例。

错误的示例使用了全局的 axios 对象并调用了 interceptors.request.use 方法来添加请求拦截器。全局的 axios 是一个默认配置好的实例，通常用于发起 HTTP 请求。

正确的示例创建了一个名为 instance 的新变量，并且在这个变量上调用了 interceptors.request.use 方法。这意味着你在处理的是一个自定义的 Axios 实例，这个实例可能有不同的配置（比如不同的基地址、超时设置等）。

如果您想要确保两个例子都正确工作，那么应该先确认是否有一个名为 instance 的 Axios 实例被正确地初始化并使用。如果不存在这样的实例，您可以将第二段代码中的 instance 替换为 axios，如下所示：

axios.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

如果您的应用中确实有多个 Axios 实例并且您想要修改特定实例的拦截器，那么应当确保正确引用了那个实例。例如，如果有一个名为 apiClient 的实例，你应该这样写：

const apiClient = axios.create(); // 创建一个新的 Axios 实例
apiClient.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
);

然后，在需要的地方使用这个 apiClient 发送请求：

apiClient.get('/some-endpoint');

如果你在同一个文件中同时使用全局的 axios 和自定义的 instance，请确保没有混淆它们的使用。根据上下文选择正确的对象来添加拦截器或发送请求。