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

Posted 2023-02-19

【中文标题】Angular ui 路由器 - 重定向根本不起作用

【英文标题】：Angular ui router - Redirection doesn't work at all

【发布时间】：2014-11-25 22:34:16

【问题描述】：

我在我的 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');
        
    );

【问题讨论】：

isUserLoggedIn 定义在哪里？

我有一个身份验证服务，由于一些官方原因，我从这段代码中跳过了它。它适用于默认路由。

【参考方案1】：

如果状态 TO 已经是“登录”，我们在这里需要的是不重定向。

只是草拟的调整

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

请查看此问答How can I fix 'Maximum call stack size exceeded' AngularJS 和a plunker 有类似的解决方案

【讨论】：

但我的登录标志实际上是一个返回布尔值的函数，它是某些服务的一部分。在这种情况下如何使用它？还有，无限循环不会到处出现吗？

你能检查一下这个答案吗：***.com/a/24725180/1679310？试试这个笨蛋plnkr.co/edit/JLABnz?p=preview？它应该显示它是如何工作的。还有一些外部服务User 返回布尔值，但是在 $stateChangeStart 中仍然评估是否/在哪里重定向的逻辑。这有帮助吗？

太棒了！ preventDefault 在事件处理程序中工作，现在重定向到登录页面工作正常。但是，在我的注销功能中，我使用 $state.go 重定向到登录页面，它仍然会导致循环。注销是由单击按钮触发的，因此我可以使用 preventDefault。

请不要误会我的意思。请，如果我可以问你，放慢速度，深呼吸；）它不应该那么困难。想想你的应用程序。如果有注销...重定向到“main”或“home”，只需将这些添加到开头的条件中，例如（如果 Login 或 Main 或 Home ...）返回...不要重定向。这只是一个更精确的设置。这有帮助吗？我相信你会在一分钟内完成的。你快到了；）

谢谢，你真的让我想到了！ :) 现在几乎完成了。还有一件事，如果用户已登录，我如何留在当前页面？

【参考方案2】：

我使用了类似的东西：

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();
    
  );
]);