vue接口http的接口请求

Question

vue中http://218.92.237.118:8000/api/dept?enabled=true&pid=125 这种接口如何调用，token怎么带

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

在Vue.js项目中调用指定的HTTP接口并携带Token进行身份验证，可以通过以下步骤实现：

1. 安装Axios

首先，确保你的项目中安装了Axios。如果没有安装，可以通过以下命令安装：

npm install axios

2. 调用HTTP接口

在Vue组件中，你可以使用Axios发送GET请求。以下是一个示例代码：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'YourComponent',
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('http://218.92.237.118:8000/api/dept', {
        params: {
          enabled: true,
          pid: 125
        }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error('Error:', error);
      });
    }
  }
};
</script>

3. 携带Token

为了在请求中携带Token，你可以在发送请求时配置Axios的默认头部。以下是如何设置Token的示例：

<script>
import axios from 'axios';

export default {
  name: 'YourComponent',
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const token = localStorage.getItem('token'); // 假设Token存储在localStorage中

      axios.get('http://218.92.237.118:8000/api/dept', {
        params: {
          enabled: true,
          pid: 125
        },
        headers: {
          'Authorization': `Bearer ${token}`
        }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error('Error:', error);
      });
    }
  }
};
</script>

4. 设置全局默认头部

如果你希望所有的请求都自动携带Token，可以在Axios的全局配置中设置默认头部：

<script>
import axios from 'axios';

export default {
  name: 'YourComponent',
  created() {
    const token = localStorage.getItem('token'); // 假设Token存储在localStorage中
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  },
  methods: {
    fetchData() {
      axios.get('http://218.92.237.118:8000/api/dept', {
        params: {
          enabled: true,
          pid: 125
        }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error('Error:', error);
      });
    }
  }
};
</script>

这样，每次发送请求时，Axios都会自动在请求头中添加Token。

注意事项

• 确保Token的安全性，不要在不安全的环境中存储或传输Token。
• 根据实际需求，选择合适的存储Token的方式（例如使用Vuex、localStorage或sessionStorage）。

通过以上步骤，你可以在Vue.js项目中成功调用HTTP接口并携带Token进行身份验证。