如何在Angular中从路由获取点击验证链接的用户邮箱地址

一、从路由获取邮箱的实现方法 #

完全可以通过路由拿到邮箱，你之前提取失败大概率是未对邮箱特殊字符做编码处理，或发送验证链接时未将邮箱参数拼入URL，可按以下步骤实现：

• 第一步：生成验证链接时编码邮箱
  邮箱包含@、.等URL特殊字符，直接拼接会导致解析失败，需要先做URL编码，以Node.js后端为例：

  const userEmail = 'user@example.com'
  const verifyToken = 'xxxxxx' // 你的验证凭证
  // 方式1：查询参数携带
  const verifyLink = `https://your-domain.com/verify?email=${encodeURIComponent(userEmail)}&token=${verifyToken}`
  // 方式2：路由参数携带
  // const verifyLink = `https://your-domain.com/verify/${encodeURIComponent(userEmail)}?token=${verifyToken}`
  

• 第二步：前端页面提取解码邮箱
  页面加载时从路由中提取参数并解码即可拿到邮箱：

  // 提取查询参数示例
  const urlParams = new URLSearchParams(window.location.search)
  const userEmail = decodeURIComponent(urlParams.get('email'))
  // 拿到后直接渲染到页面提示位置即可
  document.querySelector('.tip-text').innerText = `我们已向您发送验证码至 ${userEmail}`
  

  如果你用前端框架，直接对应路由API取参数即可：
  • Vue Router：const userEmail = decodeURIComponent(this.$route.query.email)
  • React Router：const {email} = useParams(); const userEmail = decodeURIComponent(email)

如果对安全性要求高，不想明文暴露邮箱在URL中，可以把验证token和邮箱绑定存在后端，前端加载时先调用接口GET /api/get-email-by-token?token=xxx，后端校验token有效性后返回对应邮箱即可。

二、点击“使用您的账号登录”时获取邮箱的实现方法 #

可以通过临时存储或者路由传参实现：

• 方案1：临时存储传值
  在验证页面拿到邮箱后，点击跳转登录页前，将邮箱存入sessionStorage：

  // 验证页点击登录按钮时执行
  sessionStorage.setItem('tempLoginEmail', userEmail)
  window.location.href = '/login'
  

  登录页加载时取出即可展示：

  const loginEmail = sessionStorage.getItem('tempLoginEmail')
  // 用完可清除，避免残留
  sessionStorage.removeItem('tempLoginEmail')
  

• 方案2：路由传参
  跳转时直接把编码后的邮箱带到登录页路由参数，登录页按第一步的方法提取即可。

效果参考 #

注意事项 #

• 邮箱在URL中传递必须做编码/解码处理，否则会出现参数截断、解析失败的问题
• 用token换邮箱的方案需要先校验token的有效性，避免邮箱信息泄露
• sessionStorage仅在当前标签页生效，关闭后自动清除，适合存储临时敏感信息

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