vue封装一个下载接口，用location.href调用下载接口如何安全的传token

在Vue中封装一个下载接口，可以通过使用axios库来发送HTTP请求，并在请求头中传递token来实现安全的传递。 首先，确保你已经安装了axios库。可以使用以下命令进行安装： ``` npm install axios ``` 然后，在你的Vue组件中，可以创建一个方法来封装下载接口的逻辑。在该方法中，你可以使用axios发送GET请求，并在请求头中添加token。 ```javascript import axios from 'axios'; export default { methods: { downloadFile() { const token = 'your_token'; // 替换为你的token const url = 'your_download_url'; // 替换为你的下载接口URL axios({ method: 'get', url: url, headers: { Authorization: `Bearer ${token}` }, responseType: 'blob' // 设置响应类型为blob，以便处理文件下载 }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file_name'); // 替换为你想要保存的文件名 document.body.appendChild(link); link.click(); }) .catch(error => { console.error('下载文件失败', error); }); } } } ``` 在上述代码中，我们使用axios发送GET请求，并在请求头中添加了Authorization字段，值为Bearer加上token。这样服务器端就可以验证token的有效性。 在成功获取到文件数据后，我们创建一个URL对象，并将其赋值给一个新创建的a标签的href属性。然后，我们设置a标签的download属性为你想要保存的文件名，并将其添加到页面中。最后，通过调用a标签的click方法来触发文件下载。 请注意，上述代码中的token和下载接口URL需要根据你的实际情况进行替换。 这样，你就可以在Vue组件中调用`downloadFile`方法来安全地传递token并下载文件了。