javascript - 阻止用户登录后导航到某些网址 - angular-ui-router

Question

目前我正在我的应用程序中使用 angularjs 开发一个示例管理应用程序。我使用 ui-router 而不是 ngRoute 来定义 url。在我的配置函数状态定义如下。

sampleModule.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {

    $urlRouterProvider.otherwise('login');
    $stateProvider
        .state('login',{
            url:'/login',
            templateUrl: 'views/html/login.html',
            controller: 'authCtrl'
        }).state('main', {
            url:'/main',
            templateUrl: 'views/html/main.html',
            controller: 'adminViewCtrl'
        });
}]);

在应用程序的运行状态下，我将用户重定向到各自的 View ，如下所示。

sampleModule.run(function ($rootScope, AuthService, $state) {

    $rootScope.$on("$stateChangeStart", function (event) {
            if (AuthService.isAuthenticated()) {
                event.preventDefault();
                $state.go('main');
            } else {
                event.preventDefault();
                $state.go('login');
            }
    });
});

但我面临的问题是应用程序给出以下异常，并且在 URL 更改时有时会崩溃。

RangeError: Maximum call stack size exceeded

我将调试点放置到应用程序的运行功能上，并且 并注意到出现错误是因为 if (AuthService.isAuthenticated()) { 条件中的内容在无限循环中执行。

下面是chrome开发者工具中的错误图片

我对这里发生的事情感到困惑，我在 Google 上搜索了几个小时，但无法得出直接答案，我什至尝试将 event.preventDefault() 作为我看到的一些建议，但它并没有帮助解决问题。

我想知道我在这里犯了什么错误？有没有更好的方法来限制用户在登录应用程序后访问登录页面或应用程序的其他部分？

Answer 1

这里的问题是您不断地将用户重定向到相同的状态。发生的情况如下:用户进入某个状态，$stateChangeStart 被触发，您再次将用户重定向到其他状态，然后再次触发 $stateChangeStart，您检查身份验证并再次重定向，直到出现 RangeError 为止。您可能应该做的只是在用户未经授权时重定向用户，如果他被授权，让他看到他正在寻找的页面。

sampleModule.run(function ($rootScope, AuthService, $state) {

    $rootScope.$on("$stateChangeStart", function (event, toState) {
            if (!AuthService.isAuthenticated() && toState.name !== 'login') {
                $state.go('login');
            } else if(AuthService.isAuthenticated() && toState.name === 'login') {
                $state.go('main');
            } 
    });
});

在这里，您检查用户是否已获得授权以及导航状态是否未登录(因为他已经被重定向)，然后检查他是否想要登录页面并重定向到main