小编典典

Angular ui路由器-重定向根本不起作用

angularjs

ui.router在Angular应用中用于路由。在典型的登录场景中,如果用户未登录,我会将用户重定向到登录URL。如果没有ui.router库,则可以将$
routeChangeStart事件与结合使用,效果很好$location.path。现在,我正在使用$stateChangeStart结合了的事件,$state.go但没有任何效果!它还会将我的浏览器发送到一个无限循环中。我从其他来源了解到,这是一个已知的错误,建议的解决方案都不适合我。而且,$location.path也不会重定向到登录页面。

这是我配置路径的方式:

 .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(['$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');
        }
    });

阅读 367

收藏
2020-07-04

共1个答案

小编典典

如果状态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();

 ...
 // also prevent default on redirect
 $state.go('login');
 event.preventDefault(); 
 ...

和具有类似解决方案的插件

2020-07-04