ui-router - $ state.go()无效

Rub*_*ema 5 javascript angularjs angular-ui-router

这是我的项目的app.js:

(function () {
'use strict';

angular
    .module('app', ['ui.router', 'ngCookies', 'angular-inview', 'ngMaterial'])
    .config(config)
    .run(run);

config.$inject = ['$stateProvider', '$urlRouterProvider', '$mdThemingProvider'];
function config($stateProvider, $urlRouterProvider, $mdThemingProvider) {
        $mdThemingProvider.theme('default')
            .primaryPalette('deep-orange')
            .accentPalette('teal', {
              'default': 'A400'
            });

        $urlRouterProvider.otherwise('/app');

        $stateProvider
            .state('app', {
                url: '/app',
                data: {
                    clearenceLevel: 1
                  },
                  views: {
                    '': {
                        templateUrl: 'app/views/navbar.html',
                    }
                }
            })
            .state('home.works', {
                url: '/works',
                templateUrl: 'app/views/works.html',
                controller: 'WorksController as vm'
            })
            .state('login', {
                url: '/login',
                templateUrl: 'app/views/login.html',
                controller: 'LoginController as vm',
                data: {
                    clearenceLevel: 0
                  }
            })
            .state('register', {
                url: '/register',
                templateUrl: 'app/views/register.html',
                controller: 'RegisterController as vm',
                data: {
                    clearenceLevel: 0
                  }
            });
}
run.$inject = ['$rootScope', '$location', '$state', '$cookieStore', '$http', 'AuthenticationService'];
function run($rootScope, $location, $state, $cookieStore, $http, AuthenticationService) {
    $rootScope.globals = $cookieStore.get('globals') || {};

    if ($rootScope.globals.currentUser) {
        $http.defaults.headers.common['aimm-token'] = $rootScope.globals.currentUser.token;
        $http.defaults.headers.common['aimm-id'] = $rootScope.globals.currentUser.id;
    }

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        var clearenceLevel = toState.data.clearenceLevel;
        var loggedIn = $rootScope.globals.currentUser;

        if (clearenceLevel > 0 && !loggedIn) {
            alert("redirecting");
            return $state.go('login');
        }
    });
}
})();
Run Code Online (Sandbox Code Playgroud)

我只是不能让$ state.go()工作.该$on('$stateChangeStart'...);工作正常,并试图用没有会话达到保护状态时,警报坡平.但是return $state.go('login');没有用.它重定向到/app.

谢谢你的帮助.

Rub*_*ema 10

好吧,多亏了@ Vanojx1,我发现在它工作e.preventDefault();之前就加了$state.go('login');.仍然不明白为什么.

  • 原因是因为你正在使用stateChangeStart - 一旦完成将会执行状态转换到`toState`,所以它会覆盖你的`$ state.go`.`e.preventDefault()`告诉它不要执行`toState`转换 (4认同)

ahm*_*och 5

您需要执行$state.goon on main scope而不是临时创建的(角度)服务或虚拟范围.

您也可以通过将其包装在其中$timeout或者setTimeout将其注册到浏览器循环中来解决问题,以便在当前方法运行之后执行等等,即使用0毫秒就可以执行此操作,例如.

$timeout(()=>{$state.go('xyz')},0)
Run Code Online (Sandbox Code Playgroud)

要么

setTimeout(()=>{$state.go('xyz')},0);
Run Code Online (Sandbox Code Playgroud)