如何使用 UI 路由器在 angularjs 中实现密码重置

Question

在我的 AngularJS 应用程序中，我使用 JWT 和 UI Router 实现了登录、注册和忘记密码功能。

当用户点击忘记密码时，将向用户发送一封电子邮件，其中包含重置密码的链接。我们如何将此链接映射到 AngularJS 应用程序中的特定状态（密码重置）？

密码重置链接的格式为http://myapp.com/reset/token。我还需要检索该令牌。

谢谢。

Answer 1

您可以在 https://github.com/meanjs/mean/ 中找到一个干净的实现（在这个 repo modules/users/client/config/users.client.routes.js）

在此示例中，重置 url 将类似于 localhost:3000/password/reset/:token

angular.module('users').config(['$stateProvider',
  function ($stateProvider) {
    // Users state routing
    $stateProvider
      .state('password', {
        abstract: true,
        url: '/password',
        template: '<ui-view/>'
      })
      .state('password.forgot', {
        url: '/forgot',
        templateUrl: 'modules/users/client/views/password/forgot-password.client.view.html'
      })
      .state('password.reset', {
        abstract: true,
        url: '/reset',
        template: '<ui-view/>'
      })
      .state('password.reset.invalid', {
        url: '/invalid',
        templateUrl: 'modules/users/client/views/password/reset-password-invalid.client.view.html'
      })
      .state('password.reset.success', {
        url: '/success',
        templateUrl: 'modules/users/client/views/password/reset-password-success.client.view.html'
      })
      .state('password.reset.form', {
        url: '/:token',
        templateUrl: 'modules/users/client/views/password/reset-password.client.view.html'
      });
  }
]);