如何使用 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 下面的示例以满足我的需要？其他不使用以下示例的解决方案只要能解决手头的问题，我也可以接受。

Example: Uses the data object on the state config to define a rule function that will run logic against the user (here using an example service called $currentUser). The $stateChangeStart handler catches all state transition and performs this rule check before allowing the transition, potentially blocking it and/or redirecting to a different state.

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

常见问题解答中的示例尝试创建一种通用方法来向任何页面添加规则。让我们保持简单：

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 ，它将安排用户是否经过验证的信息。

您可以仅将 resolve 属性添加到您要检查验证状态的那些州。通过这种方式，这比检查 $stateChangeStart 事件要好，无论是否需要此检查，每次状态更改时都会触发该事件。

这是 link 到 documentation。

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

How to redirect users with unverified emails using Angular UI-Router?

angularjs

meteor

angular-ui-router