前端打开下载文件的URL时在headers中添加信息并保证文件名正确

遇到了这样一个需求，后端要求所有访问接口的request的headers里都要多一个Authorization认证字段，包括download接口也要做这样一个访问认证机制，这就带来了一个问题，传统window.open（url）可以在url里加参数，但是不能在头里加信息。我在某爆栈上找到了一种解决方法：

const viewFile = async (url) => {
  // Change this to use your HTTP client
  fetch(url, {headers:{/*YOUR CUSTOM HEADER*/} } ) // FETCH BLOB FROM IT
    .then((response) => response.blob())
    .then((blob) => { // RETRIEVE THE BLOB AND CREATE LOCAL URL
      var _url = window.URL.createObjectURL(blob);
      window.open(_url, "_blank").focus(); // window.open + focus
    }).catch((err) => {
    console.log(err);
  });
};

这样可以正常下载文件了，但是文件名会变成乱码，但是查看fetch的response发现文件名就在response的header里,因此要指定文件名可以用下面的方法：

const viewFile = async (url) => {
  let fileName="defaulf_file_name";
  // Change this to use your HTTP client
  fetch(url, {headers:{/*YOUR CUSTOM HEADER*/} } ) // FETCH BLOB FROM IT
    .then((response) => {
        fileName=response.headers.get("content-disposition").split("filename=")[1];
        return response.blob();})
    .then((blob) => { // RETRIEVE THE BLOB AND CREATE LOCAL URL
      var _url = window.URL.createObjectURL(blob);
      let fileLink=document.createElement('a');
      fileLink.href=_url;
      fileLink.download=fileName;
      fileLink.click();
    }).catch((err) => {
    console.log(err);
  });
};

抛砖引玉，希望大家可以指出更好的方法。