如何使用 Angular UI-Router 重定向未验证电子邮件的用户？

Question

我正在将 AngularJS 与 Meteor 一起使用，并希望将未验证电子邮件的用户重定向到登录页面。我在/client/routes.js 中创建了一个登录视图：

app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/');

  $stateProvider

  .state('signin', {
    url:'/signin',
    views: {
      main: {
        templateUrl: 'client/views/profile/signin.tpl'
      }
    }
  })

请注意，为了简洁起见，我没有列出其他州。

现在，如果用户的电子邮件尚未经过验证，我想将他们重定向到此登录页面。如何从UI-Router FAQs 修改下面的示例以满足我的需要？我可以接受不使用以下示例的其他解决方案，只要它们能解决手头的问题。

示例：使用状态配置上的数据对象来定义规则 将对用户运行逻辑的函数（此处使用示例 名为 $currentUser 的服务）。 $stateChangeStart 处理程序捕获 所有状态转换并在允许之前执行此规则检查 过渡，可能会阻止它和/或重定向到不同的 状态。

app.config(function($stateProvider) {
  $stateProvider.state('privatePage', {
    data: {
      rule: function(user) {
        // ...
      }
  });
});
app.run(function($rootScope, $state, $currentUser) {
  $rootScope.$on('$stateChangeStart', function(e, to) {
    if (!angular.isFunction(to.data.rule)) return;
    var result = to.data.rule($currentUser);

    if (result && result.to) {
      e.preventDefault();
      // Optionally set option.notify to false if you don't want 
      // to retrigger another $stateChangeStart event
      $state.go(result.to, result.params, {notify: false});
    }
  });
});

Answer 1

FAQ 中的示例尝试创建一种将规则添加到任何页面的通用方法。让我们保持简单：

app.run(function($rootScope, $state, UserService) {
    $rootScope.$on('$stateChangeStart', function(event, toState) {
        // don't check auth on login routes
        if (["signin"].indexOf(toState.name) === -1) {
            if (UserService.doesNotHaveVerifiedEmail()) {
                event.preventDefault();
                $state.go('signin');
                return;
            }
        }
    }
}); 

任何时候加载一个状态并且它不是 signin 状态，你检查用户是否被验证（取决于你的应用程序，这里我注入一个 UserService 我假设它知道用户的状态) 如果没有，您可以阻止该状态更改并将它们重定向到登录页面。

Answer 2

您可以使用 angular-ui-router 提供的resolve 功能在状态解决之前检查当前用户的电子邮件验证。代码如下所示：

app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        var isVerified = ['User', '$state', '$q',
            function(User, $state, $q) {
                var d = $q.defer();
                var loginPromise = User.getVerificationStatus();
                loginPromise.then(
                    function(response) {
                        d.resolve(response);
                    },
                    function(error) {
                        $state.go('login');
                    });
                return d.promise;
            }
        ];

        $urlRouterProvider.otherwise('/');

        $stateProvider

            .state('signin', {
                url: '/signin',
                views: {
                    main: {
                        templateUrl: 'client/views/profile/signin.tpl'
                    }
                }
            })
            .state('home', {
                url: '/home',
                views: {
                    main: {
                        templateUrl: 'client/views/profile/home.tpl'
                    }
                },
                resolve: {
                    verified: isVerified
                }
            });
    }
]);

home 状态在解析前检查验证。我已经注入了一个服务User，它将安排用户是否经过验证的信息。

您只能将解析属性添加到您想要检查验证状态的那些状态。这样，这比检查$stateChangeStart 事件要好，无论是否需要检查，每次状态更改都会触发该事件。

这是documentation的链接。