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

Angular ui router - Redirection doesn't work at all

本文关键字：不起作用 ui 路由器 重定向 Angular      更新时间：2023-09-26

我在Angular应用程序中使用ui.router进行路由。有一个典型的登录场景，如果用户没有登录，我会将其重定向到登录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');
        }
    });

这里我们需要的是，如果状态to已经是"login"，则不要重定向。

只是一个起草的调整将是

$rootScope.$on( '$stateChangeStart', function(e, toState  , toParams
                                               , fromState, fromParams) {
    var isLogin = toState.name === "login";
    if(isLogin){
       return; // no need to redirect anymore 
    }
    ...

而且，我们应该用event.preventDefault(); 调用$state.go('login');

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

请查看此问答；A如何修复'；超过了最大调用堆栈大小'；AngularJS和一个具有类似解决方案

的plunker

我使用了类似的东西：

MyApp.run(['$rootScope', '$state', function ($rootScope, $state) {
  // The event
  $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    // Is user already logged in?
    var isUserLoggedIn = $rootScope.isUserLoggedIn();
    if (isUserLoggedIn) {
      // don't let user visit login state, he's already logged in.
      $state.go('home');
      // preventDefault as described in @radim's answer
      e.preventDefault();
    } else if (toState.name === "login") {
      // user is not logged in and is not going to login state right now, send him there first.
      $state.go('login');
      // preventDefault as described in @radim's answer
      e.preventDefault();
    }
  });
}]);
相关文章：