vue 文件下载 带token验证

在Vue中实现文件下载并带有Token验证可以按照以下步骤进行操作：

1. 首先，在Vue项目中创建一个下载文件的方法。可以将此方法写在一个Vue组件中或是一个工具文件中，方便复用。命名为`downloadFile`。

2. 在`downloadFile`方法中，首先确保用户已经登录并获取到有效的Token。可以从本地存储中获取Token值或是通过Vuex的状态管理来获取。

3. 在发送下载文件的请求之前，需要在请求的头部中添加Token信息，以便进行验证。可以使用axios或是其他网络请求库发送请求。示例代码如下：

import axios from 'axios';

const downloadFile = async (fileUrl, token) => {
  try {
    const response = await axios.get(fileUrl, {
      responseType: 'blob',
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    
    // 创建一个下载链接
    const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
    
    // 创建一个虚拟的下载链接，模拟用户点击下载
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.setAttribute('download', 'filename.ext');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // 释放占用的资源
    window.URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.error('下载文件失败', error);
  }
};

4. 在需要进行文件下载的地方，调用`downloadFile`方法，并传入文件的URL和Token作为参数。例如，绑定一个点击事件来触发文件下载：

<template>
  <button @click="handleDownload">下载文件</button>
</template>

<script>
import { mapState } from 'vuex';
import { downloadFile } from '@/utils/downloadFile';

export default {
  methods: {
    handleDownload() {
      const fileUrl = 'http://example.com/file.txt';
      const token = this.token; // 从Vuex的状态管理中获取Token
      downloadFile(fileUrl, token);
    }
  },
  computed: {
    ...mapState(['token'])
  }
};
</script>

通过以上步骤，我们就可以在Vue中实现文件下载并带有Token验证。需要注意的是，下载文件的接口需要正确验证Token，在后端服务中进行相应的处理。