如何生成带登录态跳转的套餐选择页面直达链接用于邮件发送？

核心思路 #

用一个统一的入口链接携带目标页面的跳转参数，由入口页面判断用户登录状态：已登录则直接进入套餐页面，未登录则先引导至登录界面，登录完成后自动跳转至目标页面。

具体实现步骤 #

1. 设计入口链接与参数

生成带redirect参数的入口URL，示例：
https://your-app.com/entry?redirect=/subscription-plans

• redirect参数值为套餐页面的站内路径，需做URL编码避免特殊字符干扰。
• 邮件内的跳转链接统一指向这个入口地址。

2. 后端登录状态判断与重定向

以Node.js/Express为例，实现入口页面逻辑：

app.get('/entry', (req, res) => {
  // 自定义函数：通过Cookie/Token验证用户是否登录
  const isLoggedIn = () => {
    return req.cookies?.authToken || req.headers.authorization;
  };

  const redirectUrl = req.query.redirect || '/';
  // 验证redirect为站内地址，防止开放重定向漏洞
  const isValidRedirect = redirectUrl.startsWith('/');

  if (isLoggedIn() && isValidRedirect) {
    res.redirect(redirectUrl);
  } else {
    // 将合法的redirect参数传递给登录页面
    res.redirect(`/login?redirect=${encodeURIComponent(isValidRedirect ? redirectUrl : '/')}`);
  }
});

// 登录接口处理逻辑
app.post('/login', (req, res) => {
  // 替换为实际的账号密码校验、Token生成逻辑
  const loginSuccess = true;

  if (loginSuccess) {
    const redirectUrl = req.query.redirect || '/';
    res.redirect(redirectUrl);
  } else {
    res.redirect('/login?error=invalid_credentials');
  }
});

3. 单页应用（SPA）前端处理

如果是React/Vue这类SPA，入口页面可设计为纯逻辑组件：

// React + React Router 示例
import { useEffect, useLocation } from 'react';
import { useAuth } from './contexts/AuthContext';
import { useNavigate } from 'react-router-dom';

const EntryPage = () => {
  const { isAuthenticated } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  
  // 提取并验证redirect参数
  const searchParams = new URLSearchParams(location.search);
  const redirect = searchParams.get('redirect') || '/';
  const isValidRedirect = redirect.startsWith('/');

  useEffect(() => {
    if (isAuthenticated) {
      navigate(isValidRedirect ? redirect : '/');
    } else {
      navigate(`/login?redirect=${encodeURIComponent(isValidRedirect ? redirect : '/')}`);
    }
  }, [isAuthenticated, navigate, redirect, isValidRedirect]);

  return <div>加载中...</div>;
};

export default EntryPage;

登录成功后，登录组件读取URL中的redirect参数，调用路由导航跳转到套餐页面。

4. 邮件中的链接写法

直接将入口链接插入邮件内容，示例：

您需要选择套餐，请点击选择您的套餐完成操作。

关键注意事项 #

• 防开放重定向漏洞：必须验证redirect参数的合法性，只允许跳转到站内路径（比如判断路径是否以/开头），避免被恶意利用跳转到外部钓鱼网站。
• 移动端适配：如果需要唤起APP，需配置App Link（Android）或Universal Link（iOS），APP内同样实现登录状态判断和参数跳转逻辑。

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