我正在使用 angularjs 和 ui-router 构建一个简单的博客应用程序，我想监听每个状态变化并检查用户是否已登录。如果他没有登录，我想将他重定向到登录页面。

场景非常简单，我试图实现 this solution没有运气。

这是相关代码:

app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('app', {
        url: '',
        abstract: true
    });
    $urlRouterProvider.otherwise('blogs');
});

app.run(function($rootScope, $state, $location, UserService){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    console.log("state change: from state: " + fromState.name + " to state: " + toState.name);
        let loggedIn = UserService.isLoggedIn();
        if (toState.name !== 'app.login' && !loggedIn){
            event.preventDefault();
            $state.go('app.login');
    });
});

其中“app.login”定义为登录状态，“blogs”是我希望应用程序在启动时转到的主要供稿的 url。

查看 chrome 控制台时，当没有用户登录时，我看到:

[HMR] Waiting for update signal from WDS...
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
state change: from state:  to state: app.blogs
state change: from state:  to state: app.login
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (angular.js:68)
    at Scope.$get.Scope.$digest (angular.js:15753)
    at Scope.$get.Scope.$apply (angular.js:15986)
    at bootstrapApply (angular.js:1658)
    at Object.invoke (angular.js:4473)
    at doBootstrap (angular.js:1656)
    at Object.bootstrap (angular.js:1676)
    at Object.<anonymous> (bootstrap.js:4)
    at __webpack_require__ (bootstrap 7b71f5eb02d2540fe63f:520)
    at fn (bootstrap 7b71f5eb02d2540fe63f:75)
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.5/$rootScope/infdig?p0=10&p1=%5B%5D
XHR finished loading: GET "http://localhost:8080/login/login.html".

而且出现了好几次。此外 - 网址在/login 和/blogs 之间跳转。

我做错了什么？

(编辑:我在 console.log 中添加了一些调试)

最佳答案

出于某种原因，这段代码有效:

app.run(function($rootScope, $state, $location, UserService){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        let loggedIn = UserService.isLoggedIn();
        if  (toState.name !== 'app.login' && !loggedIn){
            $location.url('/login');
        }
    });
});

我将重定向到登录页面的方式从 $state.go 更改为 $location.url。

每次我使用 $state.go 它都会触发另一个 $stateChangeStart 事件，这显然是错误的。 这样就不需要 event.preventDefault()。

关于javascript - angularjs + ui 路由器 : redirect to login page when user is not logged in on each state change，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32411356/