简体   繁体   English

将用户重定向到另一个页面后开始文件下载(NodeJS / Express)

[英]Start a file download after redirecting a user to another page (NodeJS / Express)

Background Information背景资料

  • I am working on a NodeJS w/ Express project.我正在开发带有 Express 项目的 NodeJS。
  • There are publicly visible buttons that should allow file downloads, and these buttons have protected routes which redirect the user to a login page if they are not logged in.有一些公开可见的按钮应该允许文件下载,并且这些按钮具有受保护的路由,如果用户未登录,这些路由会将用户重定向到登录页面。
  • I am storing some information related to file downloads in a cookie, and that is working.我在 cookie 中存储了一些与文件下载相关的信息,这正在起作用。 Essentially it is need_to_download_file2 == true本质上它是need_to_download_file2 == true

The Problem问题

Once the user authenticates, I want to redirect them to the home page and then start a file download for the file they originally clicked on.一旦用户通过身份验证,我想将他们重定向到主页,然后开始为他们最初单击的文件下载文件。 As of now, everything is working, but the file download does not start after the redirect, the user must click download again to initiate it.截至目前,一切正常,但重定向后文件下载未开始,用户必须再次单击下载以启动它。

Main Approach:主要方法:

  • I am attempting to call window.open('/download/file2') in the index.html page's onLoad() event.我试图在 index.html 页面的onLoad()事件中调用window.open('/download/file2') However, the network tab shows the request as being cancelled.但是,网络选项卡将请求显示为已取消。 This is all that is contained in the onLoad() event.这就是onLoad()事件中包含的全部内容。
// onLoad
function hidePreloader () {
  document.getElementById('preloader').style.display = 'none'
  document.getElementById('contentDiv').style.display = 'block'

  window.open('localhost:3000/download/file2','_self');
}

I would really appreciate any help, and can provide more information if needed!我真的很感激任何帮助,如果需要可以提供更多信息!

Thanks in advance.提前致谢。

If I recall properly, all client upload files must be picked by the user themselves.如果我没记错的话,所有客户端上传的文件都必须由用户自己选择。 A server is not allowed to specify a file to upload on its own (security problem with that as a server could randomly target any file on your hard drive).不允许服务器指定要自己上传的文件(安全问题,因为服务器可能会随机定位您硬盘上的任何文件)。 Instead, the user has to manually select the file to upload.相反,用户必须手动选择要上传的文件。

What you could do (for a better user experience) is check to see if the user appears to be authenticated on the client side via Javascript.您可以做的(为了更好的用户体验)是检查用户是否在客户端通过 Javascript 进行了身份验证。 If not, then use Ajax to log them in (without changing/losing the current page).如果没有,则使用 Ajax 登录(不更改/丢失当前页面)。 Then, after they've authenticated via Ajax, the original upload file is still specified in the current page and it can then be started without the user having to pick the file again.然后,在他们通过 Ajax 进行身份验证后,原始上传文件仍然在当前页面中指定,然后可以启动它,而无需用户再次选择文件。

Your server will still check for proper auth when the upload request arrives, but if the user follows this path, they should be authenticated already.当上传请求到达时,您的服务器仍将检查正确的身份验证,但如果用户遵循此路径,则他们应该已经进行了身份验证。

FYI, window.open() is often blocked by the popup blocker functionality in a browser if not the direct result of a user click (and even then it's still sometimes problematic).仅供参考,如果不是用户单击的直接结果, window.open()通常会被浏览器中的弹出窗口阻止程序功能阻止(即便如此,它有时仍然存在问题)。 It would be more reliable to not rely on popup windows.不依赖弹出窗口会更可靠。 Often times, you can simulate the same experience with a popup built into the page, not as a separate window.很多时候,您可以使用页面内置的弹出窗口来模拟相同的体验,而不是作为单独的窗口。

Add trigger and fire it which will call the same method , which is called by button.添加触发器并触发它,这将调用由按钮调用的相同方法。 It's easy to implement in JQuery but in pure javascript How to trigger event in JavaScript?在 JQuery 中很容易实现,但在纯 javascript 中如何在 JavaScript 中触发事件? may help you.可能会帮助你。 In node.js/express for frontend you can install jqyery module by npm i jquery .在前端的 node.js/express 中,您可以通过 npm i jquery 安装 jqyery 模块。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM