Ajax方式实现文件的下载

需求背景：今天实现一个文件下载功能，因为要对下载者进行token鉴权，而token是携带在header里面的，所以一般的方法例如用a标签，或者el-link这些都满足不了要求，只能通过ajax的方式实现，搞了一个小时，现在把前后端代码贴出来。

后端代码，后端代码没有什么特殊的

@PostMapping("/downloadFile")
public void downloadFile(@Valid @RequestBody FileDownload fileDownload, HttpServletResponse response) throws IOException {
    if (!fileDownload.getFileUrl().startsWith(FileConstants.RESOURCE_PREFIX)){
        throw new BaseException("File does not exist");
    }
    String fileUrl = fileDownload.getFileUrl().replace(FileConstants.RESOURCE_PREFIX,FileConstants.PROFILE);
    File file = new File(fileUrl);
    if (!file.exists()){
        throw new BaseException("File does not exist");
    }
    ServletOutputStream out = null;
   try {
       byte[] fileArray = FileUtils.readFileToByteArray(file);
       out = response.getOutputStream();
       out.write(fileArray);
   }catch (Exception e){
        if (out != null){
            out.close();
        }
   }
}

主要是前端的代码，主要就是在这儿吃了亏

downloadFile (row) {
  this.$axios({
    url: '/help/downloadFile',
    method: 'post',
    responseType: 'blob',
    data: {
      fileUrl: row.fileUrl,
      fileName: row.fileName
    }
  })
    .then(res => {
      if (!res.data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([res.data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', row.fileName)
      document.body.appendChild(link)
      link.click()
      // 释放URL对象所占资源
      window.URL.revokeObjectURL(url)
      // 用完即删
      document.body.removeChild(link)
    })
    .catch(res => {})
},