vue2和axios实现鉴权操作

在 Vue 2 中使用 axios 实现鉴权操作的一种常见方式是通过拦截器（interceptors）来实现。下面是一个简单的示例：

1. 安装 axios：首先，确保已经安装了 axios 库。如果没有安装，可以使用以下命令进行安装：

npm install axios

2. 创建 axios 实例：在项目中创建一个 axios 实例，并进行一些全局设置，如设置基本的请求地址、超时时间等。

// main.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com', // 设置基本的请求地址
  timeout: 5000, // 设置超时时间
});

// 可以添加其他的全局设置，比如设置请求头等

Vue.prototype.$api = api;

3. 创建请求拦截器：在 Vue 的入口文件（如 main.js）中，创建请求拦截器，用于在每个请求发送前进行一些操作，比如添加鉴权信息到请求头。

// main.js
api.interceptors.request.use(
  config => {
    // 在请求发送前进行一些操作，比如添加鉴权信息到请求头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

4. 发送鉴权请求：在需要进行鉴权的地方，使用上述创建的 axios 实例进行请求发送。

// Login.vue
methods: {
  login() {
    this.$api.post('/login', { username, password })
      .then(response => {
        // 鉴权成功，处理响应数据
        console.log(response.data);
        // 保存 token
        localStorage.setItem('token', response.data.token);
      })
      .catch(error => {
        // 鉴权失败，处理错误信息
        console.error(error);
      });
  }
}

通过以上步骤，你可以在 Vue 2 中使用 axios 实现鉴权操作。在请求拦截器中，可以添加鉴权信息到请求头，然后在发送请求时自动携带该信息。在登录页面的请求中，可以处理鉴权成功或失败的响应，并根据需要进行相应的操作。