Vue3 中请求拦截器内 token 的配置方法

在 Vue3 项目开发中，请求拦截器是处理网络请求的重要环节，而合理配置 token 能够增强请求的安全性和有效性。下面将详细介绍 Vue3 中请求拦截器内 token 的配置方法。

我们需要引入相关的库，如 axios 用于发送网络请求。然后，创建一个 axios 实例，并设置基本的配置，如 baseURL、timeout 等。

在请求拦截器中，我们可以在发送请求之前进行一些预处理操作。获取 token 的方式通常有多种，比如从本地存储（localStorage）或者 Vuex 状态管理中获取。假设我们从 localStorage 中获取 token，代码可能如下：

const token = localStorage.getItem('token');

获取到 token 后，将其添加到请求的 headers 中。

axios.interceptors.request.use(config => {
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

这样，每次发送请求时，都会携带上 token 信息，确保后端能够识别用户的身份和权限。

但需要注意的是，要处理 token 过期或无效的情况。当后端返回 token 过期的响应时，需要进行相应的处理，比如清除本地的 token 并跳转到登录页面，重新获取有效的 token。

还可以根据实际需求在请求拦截器中添加更多的逻辑，如对请求参数进行统一的处理、添加公共的请求头信息等。

在 Vue3 中正确配置请求拦截器内的 token 是保障应用安全和稳定运行的重要环节。通过合理的配置和处理，可以提高应用的可靠性和用户体验。在实际开发中，要根据项目的具体需求和架构，灵活运用这些方法，确保 token 的配置和使用符合项目的要求。