How to Use Intermediate Pages for Seamless Cross‑Team Redirects in Front‑End Projects

Background

In everyday coding we often encounter interaction or collaboration issues that require handling link jumps between different business teams or third‑party sources. Providing a middle page can act as a bridge, centralizing the routing logic based on query parameters before forwarding users to the final target pages.

Use Cases

1: Uncertain multiple business parties or different channels

When the provider faces various teams or channels (WeChat, mini‑programs, apps), a middle page can parse query parameters and redirect to specific target pages A, B, C, etc., keeping the target pages focused on their own logic.

// Example array for handling query logic
const fnList = [
  ['appid', 'handleAppid'],
  ['token', 'handleToken'],
  ['payUrl', 'handlePayUrl'],
  ['sourceId', 'handleSourceId'],
  // ...
];

mounted() {
  this.handleQuery();
  // After processing, redirect to the target page
  if (this.query.target) {
    location.replace(this.query.target);
  }
},

handleQuery() {
  // Pre‑processing can be added here
  // ...
  // Process query parameters
  fnList.forEach(([key, fn]) => {
    if (this.query[key] && this[fn]) {
      this[fn]();
    }
  });
}

2: Same business party with customized requirements

Even with a single partner, different modes may require distinct target pages. The middle page receives a type query and forwards additional business‑specific parameters accordingly.

// Distinguish business source by type
checkType(type) {
  return this.query.type === type;
},

mounted() {
  // Optional pre‑processing
  // ...
  this.handleQuery();
},

handleQuery() {
  // Optional pre‑processing
  // ...
  // Example for a service pack
  if (this.checkType('serverPack')) {
    const newQuery = {
      sourceId: query.sourceId,
      // ...
    };
    this.$router.replace({
      name: 'orderServerPackConfirm',
      query: newQuery,
    });
    return;
  }
  // Example for a PC detail
  if (this.checkType('pcDetail')) {
    confirmQuery.osTokenId = this.query.osTokenId;
  }
  // Other cases
  // ...
  this.$router.replace({
    name: 'orderConfirm',
    query: confirmQuery,
  });
},

3: Cross‑domain requests or parameters provided by an API

When query strings become too large or a cross‑domain scenario arises, the middle page can fetch necessary data via an API before redirecting.

// Validate required query keys
checkQuery(keys = []) {
  return keys.every(key => !!this.query[key]);
},

checkType(type) {
  return this.query.type === type;
},

mounted() {
  // Optional pre‑processing
  // ...
  this.handleQuery();
},

handleQuery() {
  // Optional pre‑processing
  // ...
  // Detail page handling
  if (this.checkType('detail') && this.checkQuery(['skuId', 'quantity'])) {
    data = await this.directBuy({
      skuId: +query.skuId,
      quantity: +query.quantity,
    });
  }
  // Cart handling
  if (this.checkType('cart') && this.checkQuery(['shopcartId'])) {
    data = await this.submitCart({ shopcartids: JSON.parse(query.shopcartId) });
  }
  // Other cases
  // ...
  this.$router.replace({
    name: 'orderConfirm',
    query: confirmQuery,
  });
},

Precautions When Using Intermediate Pages

1: Do not overuse intermediate pages

While middle pages can decouple logic, they should be introduced only when necessary, considering necessity, coupling, and extensibility. Overuse may lead to chains of intermediate pages and higher maintenance costs.

2: Standardize necessary intermediate pages

Define a unified format for public query parameters such as appid (e.g., p_h5_XXX for H5, p_app_XXX for app, p_miniProgram_XXX for mini‑programs).

Standardize mandatory parameters like targetUrl and provide consistent error handling when the URL is missing.

For diverse parameter sources, consider handling them on the server side and exposing a configurable API.

3: Ensure security for targetUrl

Protect the middle page against XSS attacks by validating targetUrl against a whitelist, especially for pages that do not require authentication.

Conclusion

The above summarizes practical experiences with intermediate pages in our projects; readers facing similar scenarios may find these insights helpful, and further suggestions are welcome.