Vue 导航守卫如何在活动促销页面中根据时间戳拦截未开始或已结束的访问

在活动促销页面中用导航守卫做时间拦截，核心是路由跳转前读取活动时间范围并比对当前时间，不满足则重定向或提示；需配置 startTime 和 endTime（时间戳或 ISO 字符串），并在 router.beforeEach 中统一校验，支持静态配置与动态接口获取两种方式。

在活动促销页面中用导航守卫做时间拦截，关键在于：路由跳转前读取活动时间范围，比对当前时间，不满足就重定向或提示。不需要额外请求接口，只要活动起止时间已配置（如路由 meta 或后端返回的静态数据），就能快速生效。

在路由配置里写死活动时间区间

适合活动时间固定、上线前已知的场景。把 startTime 和 endTime 直接写进路由的 meta：

1. startTime 和 endTime 用标准时间戳（毫秒）或 ISO 字符串（如 "2026-07-25T00:00:00"）
2. 确保时间值为服务器时间或已做时区对齐（推荐用 UTC 时间 + 前端 new Date() 对比，避免用户本地时间偏差过大）

示例路由配置：

{
path: '/campaign/summer-sale',
component: SummerSale,
meta: {
requiresTimeCheck: true,
startTime: '2026-07-25T00:00:00',
endTime: '2026-08-10T23:59:59'
}
}

全局前置守卫中做时间校验

在 router.beforeEach 中统一处理所有带时间校验标记的路由：

1. 先判断 to.meta.requiresTimeCheck 是否为真
2. 用 new Date() 获取当前时间，转为毫秒数；再将 startTime/endTime 转为毫秒（new Date().getTime()）
3. 若当前时间早于开始时间 → 重定向到「活动预告页」或首页，并可附带提示文案
4. 若当前时间晚于结束时间 → 重定向到「活动结束页」或商品列表页
5. 注意：必须保证 next() 只被调用一次，避免重复跳转报错

代码片段：

router.beforeEach((to, from, next) => {
if (to.meta.requiresTimeCheck) {
const now = Date.now();
const start = new Date(to.meta.startTime).getTime();
const end = new Date(to.meta.endTime).getTime();
if (now 
next({ path: '/campaign/coming-soon', query: { activity: to.path } });
return;
}
if (now > end) {
next({ path: '/campaign/expired', query: { activity: to.path } });
return;
}
}
next();
});

需要动态时间？配合接口或 Vuex/Pinia 状态

如果活动时间由后端动态下发（比如运营后台随时调整），就不能硬编码在路由里。建议：

1. 在守卫中先检查本地缓存（如 localStorage）是否有有效的时间配置，有则直接用
2. 没有或过期时，发起轻量级请求（如 /api/campaign/config）获取最新时间，用 async/await + next(false) 暂停导航，等响应后再决定跳转
3. 或提前在应用初始化时拉取并存入 Pinia store，守卫中直接读取 useCampaignStore().activePeriod
4. 注意兜底逻辑：接口失败时，按“未开始”或“已结束”保守处理，避免白屏或误放行

用户体验细节不能漏

单纯跳走不够友好，建议补充：

1. 跳转目标页（如 /coming-soon）里显示倒计时，提升期待感
2. 已结束页提供“查看往期活动”或“订阅下次通知”的入口
3. 开发阶段加个临时开关（如 URL 参数 ?debug-time=2026-08-01），方便模拟不同时间段测试
4. 服务端也应同步校验时间，前端拦截只是体验优化，不可替代后端权限控制