检查用户是否在模板加载之前登录，根据用户登录执行 2 个不同的操作

Question

我正在学习Angular.js和UI-router。所以我试图理解：1.如何在一种状态下执行两个不同的操作，具体取决于用户是否登录。2.在几个位置重定向到主页如果用户未登录

下面是示例：有一个服务"Atuhentication"可以计算经过身份验证的用户。但是我无法将其加载到模块.config（）中，它会出现错误。

$stateProvider
    .state('home', {
        // if user is logged in go to state "chat"
        // else go to state "welcome"
    })
    .state('chat', function(){
        // if user is not logged in redirect to home page
    })

我试图在状态的控制器中制作它，但它是肮脏的方式，因为它加载模板和控制器，然后检查用户是否登录并重定向。

所以亲爱的朋友们，请指明正确的前进方向

Answer 1

您可以随时使用状态更改时广播的事件$stateChangeStart钩子和阻止状态更改。您可以在整个应用中可用的任何顶级控制器中添加此事件侦听器（例如添加到body标记的控制器），也可以使用如下所示$rootScope在任何服务中添加此事件侦听器代码：

var protectedStates = ['home', 'chat'];
$rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
     // See if state being transitioned needs to be access checked
     if (protectedStates.indexOf(toState.name) > -1) {
         if (!userLoggedIn) {
              // Prevent the current state from being changed
              event.preventDefault();
              $state.go('home');       // go to home page or login page.
         }
     }
});

更多参考： http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

希望这有帮助！

谢谢
南非