如何实现用户访问目标网站前先重定向至https://example.com的审批式跳转？

Hey there! Let's walk through how to build this approval flow where users are redirected to your approval page first, and only get access to your target site after completing the required actions. I'll cover a few practical approaches based on common tech stacks:

Frontend-Only Approach (For Static Sites) #

If your target site is static (no backend), you can use browser storage (localStorage + cookies) to track approval status. Here's how:

On Your Target Site's Entry Page #

Add this script to the top of your main page (e.g., index.html) to check if the user has completed approval:

document.addEventListener('DOMContentLoaded', () => {
  // Check if approval is already completed (fall back to cookie for cross-tab consistency)
  const isApproved = localStorage.getItem('approval_completed') || document.cookie.includes('approval_completed=true');

  if (!isApproved) {
    // Save the current page URL so we can redirect back after approval
    localStorage.setItem('redirect_target', window.location.href);
    // Send user to the approval page
    window.location.href = 'https://example.com';
  }
});

On Your Approval Page #

Once the user finishes the required action (e.g., clicking an "Agree" button, submitting a form), run this function to mark approval and redirect back:

function handleApprovalComplete() {
  // Set both localStorage and cookie to cover different scenarios
  localStorage.setItem('approval_completed', 'true');
  // Cookie with 1-day expiration (adjust max-age as needed)
  document.cookie = 'approval_completed=true; path=/; max-age=86400';

  // Redirect back to the saved target URL, or default to your target site's homepage
  const redirectUrl = localStorage.getItem('redirect_target') || 'https://your-target-site.com';
  window.location.href = redirectUrl;
}

Backend-Driven Approach (Node.js/Express Example) #

For more control and security (especially if you need to validate the approval server-side), use a backend middleware to check approval status.

Step 1: Add Approval Check Middleware #

This middleware will run on every request to your target site and redirect unapproved users:

const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(cookieParser());

// Middleware to enforce approval flow
const requireApproval = (req, res, next) => {
  if (!req.cookies.approval_completed) {
    // Save the original request URL to redirect back later
    res.cookie('redirect_after_approval', req.originalUrl, { maxAge: 3600000 }); // 1-hour expiration
    return res.redirect('https://example.com');
  }
  next();
};

// Apply the middleware to all routes (or specific ones if needed)
app.use(requireApproval);

// Your existing target site routes go here
app.get('/', (req, res) => {
  res.send('Welcome to the target site!');
});

Step 2: Approval Completion Endpoint #

On your approval page, after the user completes the action, have them make a request to this endpoint to set the approval cookie:

// Endpoint to mark approval as complete
app.get('/complete-approval', (req, res) => {
  // Set a secure, HttpOnly cookie (recommended for security)
  res.cookie('approval_completed', 'true', {
    maxAge: 86400000, // 1 day
    path: '/',
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production' // Use HTTPS in production
  });

  // Redirect back to the saved URL, or default to homepage
  const redirectUrl = req.cookies.redirect_after_approval || '/';
  res.redirect(redirectUrl);
});

Then, on your approval page, link to this endpoint (e.g., <a href="https://your-target-site.com/complete-approval">I've completed the action</a>).

Nginx Server-Level Redirect #

If you're using Nginx to serve your target site, you can handle the redirect directly at the server level without extra code:

server {
  listen 443 ssl;
  server_name your-target-site.com;

  # Check if user has the approval cookie
  if ($cookie_approval_completed != "true") {
    # Save the current request URI to a cookie
    set $redirect_path $request_uri;
    add_header Set-Cookie "redirect_after_approval=$redirect_path; Path=/; Max-Age=3600";
    return 302 https://example.com;
  }

  # Serve your target site content as usual
  location / {
    root /var/www/your-target-site;
    index index.html;
  }
}

Note: You'll need to add logic on your approval page to set the approval_completed=true cookie before redirecting back to the target site.

Key Notes & Best Practices #

• Security: For sensitive sites, avoid relying solely on frontend storage (users can edit localStorage/cookies). Use server-side sessions or signed cookies to prevent tampering.
• Approval Validation: Ensure your approval page actually verifies the user's action (e.g., form submission, manual review) before setting the approval marker—don't let users skip the process.
• Expiration: Adjust cookie/localStorage expiration based on your needs (e.g., session-only for temporary access, longer for recurring users).
• Edge Cases: Handle scenarios where the user clears cookies/storage (they'll be redirected back to the approval page) or accesses deep links (make sure you save the full URL to redirect back correctly).

Let me know if you need help tweaking any of these approaches for your specific tech stack or have questions about edge cases!

内容的提问来源于stack exchange，提问作者Ilyas Yuksel Sengonul