Angular 11中如何实现从应用A到应用B的路由重定向并保留会话存储值？

Hey there! Let's work through this problem together—since the solution depends entirely on whether your two apps share the same origin or are on separate domains, I’ll break down both scenarios clearly.

Scenario 1: App A and App B share the same origin #

This is the simplest case, as sessionStorage is shared across pages with the same protocol, domain, and port.

Subcase 1.1: Same domain, different paths (e.g., example.com/appA and example.com/appB) #

• After successful login in App A, just redirect directly to App B using:

  // Replace current page with App B to avoid back button issues
  window.location.replace("/appB");
  // Or use window.location.href = "/appB" if you want to keep App A in history
  

• In App B, you can immediately access the sessionStorage values set by App A:

  const jwtToken = sessionStorage.getItem("jwtToken");
  const otherSessionData = sessionStorage.getItem("yourKeyHere");
  

Subcase 1.2: Same root domain, different subdomains (e.g., appA.example.com and appB.example.com) #

To share sessionStorage across subdomains, you need to set a shared root domain for both apps:

1. In App A, right after login (before storing data), run:

   document.domain = "example.com";
   // Now store your JWT and session data
   sessionStorage.setItem("jwtToken", yourJwtValue);
   

2. Redirect to App B:

   window.location.replace("https://appB.example.com");
   

3. In App B’s initial page load, set the same root domain first:

   document.domain = "example.com";
   // Now you can read the session data from App A
   const jwtToken = sessionStorage.getItem("jwtToken");
   

Note: This only works for subdomains under the same root domain, and both apps must set document.domain to the same value.

Scenario 2: App A and App B are on completely different domains #

sessionStorage is origin-isolated here, so direct access won’t work. Here are the most reliable solutions:

Solution 2.1: Use postMessage for secure cross-domain data transfer #

This is a safe way to pass data between domains without exposing it in URLs:

1. In App A (after login):

   // Create a hidden iframe pointing to a dedicated "bridge" page in App B
   const bridgeIframe = document.createElement("iframe");
   bridgeIframe.style.display = "none";
   bridgeIframe.src = "https://appB.com/auth-bridge"; // Create this page in App B
   document.body.appendChild(bridgeIframe);
   
   // Wait for the iframe to load, then send the session data
   bridgeIframe.onload = () => {
     const authData = {
       type: "AUTH_TRANSFER",
       jwt: sessionStorage.getItem("jwtToken"),
       otherSessionValue: sessionStorage.getItem("yourKey")
     };
     // Send data only to App B's domain to prevent unauthorized access
     bridgeIframe.contentWindow.postMessage(authData, "https://appB.com");
     // Redirect to App B's main page after sending
     window.location.replace("https://appB.com");
   };
   

2. In App B’s /auth-bridge page (or main page), listen for the message:

   window.addEventListener("message", (event) => {
     // Verify the message comes from App A to avoid security risks
     if (event.origin !== "https://appA.com") return;
     if (event.data.type === "AUTH_TRANSFER") {
       // Store the received data in App B's sessionStorage
       sessionStorage.setItem("jwtToken", event.data.jwt);
       sessionStorage.setItem("yourKey", event.data.otherSessionValue);
       // Redirect to App B's main page
       window.location.replace("/");
     }
   });
   

Solution 2.2: Use a shared backend/SSO system (Recommended for production) #

For enterprise-grade security, implement a shared authentication system:

• Option 1: Shared Cookies: If both apps’ backends can share a root domain, store the JWT in an HttpOnly, Secure, SameSite=Strict cookie. When redirecting to App B, the browser will automatically send the cookie to B’s backend, which can validate it and pass the necessary data to B’s frontend.
• Option 2: Single Sign-On (SSO): Use protocols like OAuth2 or OpenID Connect. After logging into App A (the identity provider), App B can redirect to the same auth provider to get a valid JWT without requiring the user to log in again. This is the most scalable and secure approach for cross-domain apps.

Solution 2.3: URL parameters (Not recommended for sensitive data) #

You can pass data via URL query parameters, but this is risky because URLs are stored in browser history and logs:

• In App A:

  const jwt = encodeURIComponent(sessionStorage.getItem("jwtToken"));
  window.location.replace(`https://appB.com?jwt=${jwt}`);
  

• In App B:

  const urlParams = new URLSearchParams(window.location.search);
  const jwt = urlParams.get("jwt");
  if (jwt) {
    sessionStorage.setItem("jwtToken", decodeURIComponent(jwt));
  }
  

Warning: Never use this for sensitive data like JWTs unless absolutely necessary—exposing them in URLs increases the risk of theft or leakage.

Key Security Notes #

• Always use HTTPS to prevent man-in-the-middle attacks.
• For JWTs, prefer storing them in HttpOnly cookies instead of sessionStorage to mitigate XSS risks.
• Validate all incoming data (especially cross-domain messages) to avoid injection attacks.

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