激活后自动跳转回原始URL - 完整实现

问题描述

用户反馈：员工在企业微信端访问项目详情页时，如果未激活身份，会被重定向到激活页面。但激活完成后，停留在激活页面，无法自动跳转回原来要访问的项目详情页。

期望行为：激活完成后，自动跳转回原来要访问的项目详情页（四个阶段页面）。

解决方案

核心思路

守卫拦截时保存原始URL → 存储到 localStorage
激活完成后读取原始URL → 自动跳转回去
跳转后清除标记 → 避免重复跳转

实现细节

1. 修改守卫 - 保存原始URL

文件：src/app/custom-wxwork-auth-guard.ts

修改位置：所有跳转到激活页面的地方（共4处）

修改1：测试模式（第82-87行）

if (!profile || !profile.get('isActivated')) {
  console.log('⚠️ 测试用户未激活，跳转到激活页面');
  // 🔥 保存原始URL，激活后跳转回来
  localStorage.setItem('returnUrl', state.url);
  await router.navigate(['/wxwork', cid, 'activation']);
  return false;
}

修改2：需要授权（第107-113行）

} catch (err) {
  console.log('⚠️ 需要授权，跳转到激活页面');
  // 🔥 保存原始URL，激活后跳转回来
  localStorage.setItem('returnUrl', state.url);
  // 需要授权，跳转到激活页面
  await router.navigate(['/wxwork', cid, 'activation']);
  return false;
}

修改3：无用户信息（第116-121行）

if (!userInfo) {
  console.log('⚠️ 无用户信息，跳转到激活页面');
  // 🔥 保存原始URL，激活后跳转回来
  localStorage.setItem('returnUrl', state.url);
  await router.navigate(['/wxwork', cid, 'activation']);
  return false;
}

修改4：用户未激活（第188-192行）

console.log('⚠️ 用户未激活，跳转到激活页面');
// 🔥 保存原始URL，激活后跳转回来
localStorage.setItem('returnUrl', state.url);
await router.navigate(['/wxwork', cid, 'activation']);
return false;

2. 修改激活页面 - 自动跳转

文件：src/modules/profile/pages/profile-activation/profile-activation.component.ts

新增方法：`redirectToReturnUrl()`（第444-462行）

/**
 * 🔥 自动跳转回原始URL
 */
private redirectToReturnUrl() {
  const returnUrl = localStorage.getItem('returnUrl');
  
  if (returnUrl) {
    console.log('🔄 检测到原始URL，准备跳转:', returnUrl);
    
    // 延迟1秒跳转，让用户看到激活成功的提示
    setTimeout(() => {
      console.log('🚀 跳转到原始URL:', returnUrl);
      localStorage.removeItem('returnUrl'); // 清除标记
      this.router.navigateByUrl(returnUrl);
    }, 1000);
  } else {
    console.log('ℹ️ 未检测到原始URL，停留在当前页面');
  }
}

调用位置1：初始化检查激活状态（第220-221行）

// 如果已激活，切换到激活后视图
if (this.isActivated) {
  this.currentView = 'activated';
  
  // 如果问卷已完成，加载问卷数据
  if (this.surveyCompleted) {
    await this.loadSurveyData();
  }
  
  // 🔥 激活完成后，自动跳转回原始URL
  this.redirectToReturnUrl();
}

调用位置2：确认激活成功（第302-303行）

this.isActivated = true;
this.currentView = 'activated';

console.log('✅ 激活成功！');

// 🔥 激活成功后，自动跳转回原始URL
this.redirectToReturnUrl();

调用位置3：问卷完成后（第401-402行）

await this.loadSurveyData();
this.currentView = 'survey-result';

// 🔥 问卷完成后，自动跳转回原始URL
this.redirectToReturnUrl();

数据流程

场景1：新用户首次访问项目

用户访问: /wxwork/cDL6R1hgSi/project/abc123
    ↓
守卫检查: 未激活
    ↓
保存原始URL: localStorage.setItem('returnUrl', '/wxwork/cDL6R1hgSi/project/abc123')
    ↓
跳转到激活页面: /wxwork/cDL6R1hgSi/activation
    ↓
用户填写信息并确认激活
    ↓
激活成功，调用 redirectToReturnUrl()
    ↓
读取原始URL: '/wxwork/cDL6R1hgSi/project/abc123'
    ↓
延迟1秒后跳转
    ↓
清除标记: localStorage.removeItem('returnUrl')
    ↓
用户看到项目详情页（四个阶段）✅

场景2：已激活但问卷未完成

用户访问: /wxwork/cDL6R1hgSi/project/abc123
    ↓
守卫检查: 已激活但问卷未完成
    ↓
允许访问，但激活页面检测到问卷未完成
    ↓
用户完成问卷
    ↓
问卷完成后，调用 redirectToReturnUrl()
    ↓
如果有原始URL，跳转回去
    ↓
用户看到项目详情页 ✅

场景3：已激活且问卷已完成

用户访问: /wxwork/cDL6R1hgSi/project/abc123
    ↓
守卫检查: 已激活且问卷已完成
    ↓
直接允许访问
    ↓
用户看到项目详情页 ✅

关键特性

✅ 自动保存原始URL

在守卫的所有拦截点都保存原始URL
使用 localStorage 持久化存储
支持测试模式和生产模式

✅ 智能跳转

激活成功后自动跳转
问卷完成后自动跳转
延迟1秒，让用户看到成功提示

✅ 清除标记

跳转后自动清除 returnUrl
避免重复跳转

✅ 兼容性

如果没有原始URL，停留在当前页面
不影响正常的激活流程

调试日志

成功案例

🔐 CustomWxworkAuthGuard 执行，当前路由: /wxwork/cDL6R1hgSi/project/abc123
⚠️ 用户未激活，跳转到激活页面
💾 保存原始URL: /wxwork/cDL6R1hgSi/project/abc123

--- 用户激活 ---

✅ 激活成功！
🔄 检测到原始URL，准备跳转: /wxwork/cDL6R1hgSi/project/abc123
🚀 跳转到原始URL: /wxwork/cDL6R1hgSi/project/abc123
✅ 用户看到项目详情页

无原始URL

✅ 激活成功！
ℹ️ 未检测到原始URL，停留在当前页面

测试步骤

测试1：新用户激活后跳转

清除激活状态（Parse Dashboard）
- 找到员工的Profile记录
- 设置 isActivated = false

访问项目详情页

https://app.fmode.cn/dev/yss/wxwork/cDL6R1hgSi/project/abc123

应该被重定向到激活页面

https://app.fmode.cn/dev/yss/wxwork/cDL6R1hgSi/activation

填写信息并点击"确认身份"
1秒后自动跳转回项目详情页 ✅
看到四个阶段页面 ✅

测试2：问卷完成后跳转

访问激活页面（已激活但问卷未完成）
点击"填写问卷"
完成问卷
返回激活页面，点击"刷新状态"
1秒后自动跳转回原始URL ✅

注意事项

⚠️ localStorage 限制

只在同一域名下有效
如果用户清除浏览器数据，returnUrl 会丢失
但不影响正常激活流程，只是不会自动跳转

⚠️ 延迟跳转

延迟1秒是为了让用户看到"激活成功"的提示
如果需要立即跳转，可以将延迟改为0

⚠️ 多次激活

如果用户多次访问激活页面，returnUrl 会被覆盖
只保留最后一次的原始URL

部署步骤

1. 构建项目

ng build yss-project --base-href=/dev/yss/

2. 上传到OBS

obsutil chattri obs://nova-cloud/dev/yss -r -f \
  -i=XSUWJSVMZNHLWFAINRZ1 \
  -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 \
  -e="obs.cn-south-1.myhuaweicloud.com" \
  -acl=public-read

3. 刷新CDN缓存

hcloud CDN CreateRefreshTasks/v2 \
  --cli-region="cn-north-1" \
  --refresh_task.urls.1="https://app.fmode.cn/dev/yss/" \
  --refresh_task.type="directory" \
  --cli-access-key=2BFF7JWXAIJ0UGNJ0OSB \
  --cli-secret-key=NaPCiJCGmD3nklCzX65s8mSK1Py13ueyhgepa0s1

4. 验证

让员工重新登录企业微信应用
访问项目详情页
验证激活后自动跳转

文件修改清单

src/app/custom-wxwork-auth-guard.ts
- 第84-85行：测试模式保存原始URL
- 第109-110行：需要授权保存原始URL
- 第118-119行：无用户信息保存原始URL
- 第189-190行：用户未激活保存原始URL
src/modules/profile/pages/profile-activation/profile-activation.component.ts
- 第444-462行：新增 redirectToReturnUrl() 方法
- 第220-221行：初始化时调用跳转
- 第302-303行：确认激活后调用跳转
- 第401-402行：问卷完成后调用跳转

总结

✅ 问题已解决：激活完成后自动跳转回原始URL ✅ 用户体验提升：无需手动返回项目页面 ✅ 兼容性良好：不影响现有激活流程 ✅ 代码简洁：只需添加少量代码即可实现

创建时间：2025-11-28 最后更新：2025-11-28

activation-redirect-fix.md 8.9 KB 履歴 Raw