如何阻止外部用户直接通过浏览器地址栏访问指定路由路径

核心逻辑是区分「输入框验证后合法跳转」和「直接地址栏输入访问」两种场景，给合法跳转的用户发放临时可校验凭证，在现有canActivate守卫中新增外部用户凭证校验规则即可，具体实现步骤如下：

• 输入框验证环节新增临时令牌生成逻辑
  外部用户在输入框提交内容后，后端校验内容合法性、查询到匹配的产品ID时，同步生成一个单次有效、过期时间不超过5分钟的临时访问令牌，和产品ID一起返回给前端。令牌建议存储在sessionStorage中，关闭标签页会自动清除，不会长期留存。
• 跳转路由时关联凭证
  跳转到/products/:id路由时，不需要额外在地址栏暴露令牌，直接用存在sessionStorage的令牌即可，你可以按产品ID区分存储key，避免多产品访问冲突。
• 扩展canActivate守卫逻辑
  保留原有内部用户的校验逻辑，新增外部用户校验分支：

  先判断访问者身份，如果是内部用户走原有校验规则；如果是外部用户，先取当前访问的产品ID对应的sessionStorage令牌，没有令牌直接跳转回输入框页面；有令牌就传给后端校验有效性、是否匹配当前产品ID，校验通过才放行。

• 可选优化项
  • 令牌后端校验通过一次就立即作废，避免用户复制地址二次访问
  • 令牌过期时间尽量缩短，降低泄露风险
  • 校验通过后立刻删除本地存储的令牌，保证单次访问有效

路由守卫代码示例（Angular场景） #

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> {
  // 原有内部用户校验逻辑保留
  if (this.authService.isInternalUser()) {
    return this.authService.checkInternalAuth();
  }

  // 外部用户校验逻辑
  const targetProductId = route.params['id'];
  const tempAccessToken = sessionStorage.getItem(`product_access_${targetProductId}`);
  
  // 没有令牌直接跳转到输入页
  if (!tempAccessToken) {
    this.router.navigate(['/verify-input']);
    return false;
  }

  // 请求后端校验令牌有效性
  return this.authService.validateTempProductToken(targetProductId, tempAccessToken).pipe(
    map(isValid => {
      if (isValid) {
        // 校验通过立即删除令牌，保证单次有效
        sessionStorage.removeItem(`product_access_${targetProductId}`);
        return true;
      }
      // 校验失败跳转输入页
      this.router.navigate(['/verify-input']);
      return false;
    })
  );
}

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