angularjs - 应用程序第一次打开时的条件页面显示

Question

嗨，我刚刚开始学习 angular && angular-ui-router，我正在尝试弄清楚如何确定第一次打开应用程序的时间，以便将用户发送到登录页面或主页。

这是我到目前为止:

codeArtApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
    .state('login',{
        url : '/login',
        templateUrl:'App/scripts/login/loginView.html',
        controller: 'loginCtrl'
    })
    .state('profile', {
        url : '/profile',
        templateUrl:'App/scripts/login/loginView.html',
        controller: 'profileCtrl'
    })
    .state('404', {
        url: '/404',
        templateUrl:'App/scripts/views/404.html'
    });


$urlRouterProvider.otherwise("404");

});

codeArtApp.run(['$state', '$rootScope', function($state, $rootScope, $log){
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState){
    if(fromState.url === '^' && toState.url !== 'login'){
        $state.go('login');
    }

});

}]);

我在这里假设的是，如果 fromState.url设置为 ^然后应用程序是第一次启动。

出于某种原因，这段代码进入了一个无限循环，我得到了这个堆栈跟踪:


现在据我所知，这是因为事件 if $state.go('login')获取执行 toState.url总是 404 .

我曾希望如果 $state.go('login')被执行 toState.url将被设置为登录并且该调用将不再执行。

我可能没有在正确的地方设置这个逻辑......

谁能告诉我如何在 Angular 中实现有条件的页面显示？

Answer 1

在您的 $urlRouterProvider.otherwise调用你可以传递一个函数而不是一个字符串。像这样的东西:

$urlRouterProvider.otherwise(function($injector){

    var $state = $injector.get('$state');
    var Storage = $injector.get('Storage');

    if (Storage.has('authToken')) {
        $state.go('home');
    }
    else {
        $state.go('login');    
    }

});

希望这可以帮助!