如何实现下载开始后立即隐藏下载链接？

根据你的场景（密码验证后触发下载），有两种常用实现方式，分别适配不同的交互体验：

方案一：AJAX验证密码 + 无刷新触发下载（推荐） #

这种方式不需要页面刷新，验证成功后直接隐藏表单并触发下载，体验更流畅。

前端（Blade模板）修改 #

替换原表单，添加JS处理提交逻辑：

<form id="download-form" action="/download/{{ $data->uuid }}" method="POST" class="download-with-pw">
  @csrf
  <label for="password">Password:</label>
  <input type="password" name="password" value="" required>
  <button type="submit">Download</button>
  <div id="error-tip" style="color: red; margin-top: 8px; display: none;"></div>
</form>

<script>
// 监听表单提交
document.getElementById('download-form').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止默认表单提交
  const submitBtn = this.querySelector('button');
  submitBtn.disabled = true;
  const errorTip = document.getElementById('error-tip');
  errorTip.style.display = 'none';

  try {
    // 用AJAX提交密码验证请求
    const response = await fetch(this.action, {
      method: 'POST',
      body: new FormData(this),
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
      }
    });

    const resData = await response.json();
    if (resData.success) {
      // 隐藏下载表单
      this.style.display = 'none';
      // 创建临时a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = resData.downloadUrl;
      downloadLink.download = resData.filename; // 指定下载文件名
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    } else {
      errorTip.textContent = resData.message || '密码错误，请重试';
      errorTip.style.display = 'block';
    }
  } catch (err) {
    errorTip.textContent = '请求出错，请稍后再试';
    errorTip.style.display = 'block';
  } finally {
    submitBtn.disabled = false;
  }
});
</script>

后端（Controller）修改 #

修改原验证逻辑，返回临时下载链接而非直接触发下载：

use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\URL;

public function verifyPassword(Request $request, $uuid)
{
    // 根据UUID获取文件模型（替换成你实际的查询逻辑）
    $file = \App\Models\File::where('uuid', $uuid)->firstOrFail();

    if ($request->input('password') === $file->password) {
        // 生成带签名的临时下载链接（有效期5分钟，防止滥用）
        // 如果你用的是S3等云存储，可直接用Storage::temporaryUrl($file->path, now()->addMinutes(5))
        $downloadUrl = URL::signedRoute(
            'download.temp', 
            ['fileId' => $file->id], 
            now()->addMinutes(5)
        );

        return response()->json([
            'success' => true,
            'downloadUrl' => $downloadUrl,
            'filename' => $file->name // 传给前端指定文件名
        ]);
    }

    return response()->json([
        'success' => false,
        'message' => '密码错误'
    ], 401);
}

添加临时下载路由 #

在routes/web.php中新增带签名验证的下载路由：

Route::get('/download/temp/{fileId}', function ($fileId) {
    // 验证链接签名是否有效
    if (!request()->hasValidSignature()) {
        abort(403, '无效的下载链接');
    }

    $file = \App\Models\File::findOrFail($fileId);
    return Storage::download($file->path, $file->name);
})->name('download.temp')->middleware('signed');

方案二：表单提交 + 重定向下载（简单无JS） #

如果不需要无刷新体验，可通过Session标记实现验证后隐藏表单：

后端（Controller）修改 #

public function verifyPassword(Request $request, $uuid)
{
    $file = \App\Models\File::where('uuid', $uuid)->firstOrFail();

    if ($request->input('password') === $file->password) {
        // 存入Session标记用户已通过验证
        session()->flash('download_allowed', true);
        return redirect()->route('download.file', ['uuid' => $uuid]);
    }

    // 验证失败返回原页面并提示错误
    return back()->withErrors(['password' => '密码错误']);
}

// 新增实际下载路由
public function downloadFile($uuid)
{
    // 检查Session标记，无标记则返回原页面
    if (!session()->pull('download_allowed')) {
        return redirect()->back();
    }

    $file = \App\Models\File::where('uuid', $uuid)->firstOrFail();
    return Storage::download($file->path, $file->name);
}

前端（Blade模板）修改 #

根据Session状态决定是否显示表单：

@if(!session()->get('download_allowed'))
<form action="/download/{{ $data->uuid }}" method="POST" class="download-with-pw">
  @csrf
  <label for="password">Password:</label>
  <input type="password" name="password" value="" required>
  <input type="submit" value="Download">
  <!-- 显示错误提示 -->
  @error('password')
    <div style="color: red; margin-top: 8px;">{{ $message }}</div>
  @enderror
</form>
@else
<p>正在为您准备下载...</p>
@endif

内容的提问来源于stack exchange，提问作者MartinTTS