我ui.router在Angular应用中用于路由。在典型的登录场景中,如果用户未登录,我会将用户重定向到登录URL。如果没有ui.router库,则可以将$ routeChangeStart事件与结合使用,效果很好$location.path。现在,我正在使用$stateChangeStart结合了的事件,$state.go但没有任何效果!它还会将我的浏览器发送到一个无限循环中。我从其他来源了解到,这是一个已知的错误,建议的解决方案都不适合我。而且,$location.path也不会重定向到登录页面。
ui.router
$location.path
$stateChangeStart
$state.go
这是我配置路径的方式:
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $stateProvider .state('main', { url: '/', templateUrl: 'views/main.html', controller: 'MainCtrl' }) .state('about', { url: '/about', templateUrl: 'views/about.html', controller: 'AboutCtrl' }) .state('login', { url: '/login', templateUrl: 'views/loginform.html', controller: 'LoginCtrl' }); $urlRouterProvider.otherwise("/"); }])
而我的run方法:
run
.run(['$state', '$rootScope', '$location', function($state, $rootScope, $location) { //Check when routing starts //event, next, current $rootScope.$on( '$stateChangeStart', function(e, toState, toParams, fromState, fromParams) { //Redirect to login if the user is not logged in if (!isUserLoggedIn) { //Some suggestion //e.preventDefault(); console.log('Not logged in'); //Infinite loop, kills my browser! $state.go('login'); $state.transitionTo('login'); //Some suggestion $state.go('login', { url: '/login'}); //Doesn't work $location.path('/login'); //$location.path( $state.href('login'); console.log('Redirected'); } });
如果状态TO已经是“登录”,则我们此处需要的是不要重定向。
只是起草的调整将是
$rootScope.$on( '$stateChangeStart', function(e, toState , toParams , fromState, fromParams) { var isLogin = toState.name === "login"; if(isLogin){ return; // no need to redirect anymore } ...
而且,我们应该调用$state.go('login');与event.preventDefault();
$state.go('login');
event.preventDefault();
... // also prevent default on redirect $state.go('login'); event.preventDefault(); ...
和具有类似解决方案的插件