AngularJS实现密码重置后移除查询参数重定向至登录页

看起来你在AngularJS的hash路由场景下遇到了URL查询参数无法清除的问题，我来帮你搞定这个——你之前用的$window.location.reload()和$location.path('/my/path').search({})没生效是有原因的，咱们一步步来解决：

为什么之前的方法无效？ #

• $window.location.reload()：这个会强制刷新整个页面，浏览器会保留原来的URL查询参数重新加载，所以肯定清不掉。
• $location.path('/login').search({})：理论上这个能清除查询参数，但如果没加上replace()，可能因为历史记录的机制，导致地址栏的URL看起来没及时同步，或者留下冗余的历史条目。

正确的解决方案 #

你需要在密码重置成功的回调里，使用$location的组合方法，并且加上replace()来确保地址栏更新，同时替换掉当前的历史记录（避免用户回退到带resetcode的页面）。

首先，确保你已经在控制器里注入了$location服务（这一步很容易忘！），然后修改你的代码：

vm.resetpassword = function () {
  $scope.errorMessage = '';
  var changePasswordModel = { /* 这里是你的密码重置模型数据 */ };

  // 假设这是你的密码重置API调用
  yourPasswordResetService.reset(changePasswordModel)
    .then(function (response) {
      // 重置成功后执行以下代码
      $location.path('/login') // 定位到登录路由
               .search({})     // 清除所有查询参数
               .replace();     // 替换当前历史记录，避免回退到带resetcode的页面
    })
    .catch(function (error) {
      $scope.errorMessage = '密码重置失败：' + error.message;
    });
};

关键细节说明 #

• search({})：这个方法会清空所有查询参数，如果你只想清除特定的resetcode参数，也可以传{resetcode: null}，但清空所有更直接。
• replace()：这个方法会修改当前的浏览器历史记录条目，而不是添加新的。这样用户点击浏览器回退按钮时，会回到之前的页面，而不是带resetcode的/login页面，体验更合理。

额外检查点 #

1. 确认你的AngularJS路由配置中，/login路由是正确定义的，没有额外的参数要求。
2. 如果你用的是AngularJS 1.6及以上版本，默认路由前缀是!，但你的URL是http://localhost/myapp/#/login，说明你已经关闭了这个前缀（或者配置了hashPrefix('')），这没问题。

这样操作后，密码重置成功后地址栏就会变成http://localhost/myapp/#/login，而且不会保留之前的查询参数啦！

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