vue3 axios拦截器使用token

### 回答1：
请问您的问题是如何在Vue3中使用axios拦截器来添加token吗？如果是这样的话，可以通过以下代码来实现：

首先，在main.js中引入axios和设置拦截器：

import axios from 'axios';

// 设置baseUrl
axios.defaults.baseURL = 'http://localhost:8000/';

// 设置拦截器
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);

然后，您可以在代码中使用axios请求，并且该请求中会自动带上token：

// 发起一个有token的GET请求
axios.get('/api/user').then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});

### 回答2：
在Vue3中使用axios拦截器来为每个HTTP请求设置token是一种常见实践。Axios拦截器可以帮助我们在请求发送之前或响应返回之前拦截，并在拦截器中添加必要的数据，如token。为了在Vue3中使用Axios拦截器为每个HTTP请求设置token，下面的内容将提供一些具体方法。

首先，我们需要安装Axios和Vue3，安装方法为：

# 安装vue3
npm i vue@next -S

# 安装axios
npm i axios -S

然后，我们需要在Vue3应用中创建一个Axios实例，代码如下：

import axios from 'axios';
const api = axios.create({
    baseURL: 'http://localhost:3000',
});

export default api;

在应用程序中，我们可以在需要发送HTTP请求的组件中导入并使用此api实例。

接下来，我们需要在Axios实例中创建一个拦截器。拦截器拦截HTTP请求并在其中添加必要的headers。在这里，我们添加一个头部，它包含一个名为“Authorization”的令牌。代码如下：

api.interceptors.request.use((config) => {
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
});

通过使用这个拦截器，我们可以在每个HTTP请求中自动添加一个名为“Authorization”的头部，它包含了从localStorage中获取的令牌。

在这里，我们还要考虑到token可能会过期，因此我们还可以添加一个拦截器检查HTTP响应。如果响应包含401状态码，我们会强制用户重新登录以获取新的token。代码如下：

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token');
      router.push('/login');
    }
    return Promise.reject(error);
  });

在这个拦截器中，我们首先检查响应是否包含401状态码。如果是，我们清除localStorage中的token并强制用户重新登录。

总之，Vue3中使用Axios拦截器为每个HTTP请求设置token是一种常见实践，并且可以非常轻松地实现。借助Axios的拦截器，我们可以自动为每个HTTP请求设置token，并在token过期时强制用户重新登录。

### 回答3：
在Vue3中使用Axios拦截器来使用token进行身份验证是一种非常常见的做法。以下是详细的步骤：

第一步：安装Axios和Vue-Router

安装Axios和Vue-Router：

npm install axios vue-router --save

该命令会将axios和vue-router安装到项目中。

第二步：创建Axios实例和拦截器

创建一个名为axios.js的新文件，并在其中添加以下代码：

import axios from "axios";
import router from "@/router";

const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL
});

axiosInstance.interceptors.request.use(config => {
  const token = localStorage.getItem("token");

  if (token) {
    config.headers["Authorization"] = `Bearer ${token}`;
  }

  return config;
}, error => {
  return Promise.reject(error);
});

axiosInstance.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    router.push("/login");
  }

  return Promise.reject(error);
});

export default axiosInstance;

在这里，我们创建了一个Axios实例，并在请求中添加了一个拦截器来检查本地存储中是否有token。如果存在，则将其添加到请求头中。此外，我们还添加了一个拦截器来处理401未授权错误响应，并重定向到登录页面。

第三步：在Vue组件中使用Axios实例

确保我们在请求数据时始终使用我们创建的Axios实例。为此，我们需要在组件中导入该实例：

import axiosInstance from "@/axios";

我们现在可以像这样在组件中使用Axios：

axiosInstance.get("/users")
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

现在，我们已经成功地设置了Axios拦截器来使用token进行身份验证。我们可以在Axios实例中添加其他拦截器，以满足特定的需求。