UI-路由器状态改变但 URL 和模板不改变

Question

我正在做一些像这样的 onStateChange 授权：

angular
    .module('app')
    .run(['$rootScope', '$state', 'Auth', function ($rootScope, $state, Auth) {

        $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {

            console.log(toState);

            if (!Auth.authorize(toState.data.allow)) {

                console.log("Not authorized");
                $state.go('app.auth.login', { redirect: toState.name });
            }

            console.log('Authorized');
        });

    }]);

现在，当我前往未经授权的路线时，它会在一定程度上正常运行。授权失败，它尝试重定向到 app.auth.login。这显示在 console.logs:

Object {url: "/", templateUrl: "modules/live/index.html", name: "app.live.index", data: Object}
app.routes.js:225 Not authorized
app.routes.js:222 Object {url: "/auth/login?redirect", templateUrl: "modules/auth/login.html", controller: "LoginController", name: "app.auth.login", data: Object}controller: "LoginController"data: Objectname: "app.auth.login"templateUrl: "modules/auth/login.html"url: "/auth/login?redirect"__proto__: Object
app.routes.js:229 Authorized
app.routes.js:229 Authorized

但是URL停留在原始状态（第一次尝试的状态），我没有看到登录屏幕。 LoginController 永远不会被调用（开头有一个 console.log 没有显示。

如果我访问 /auth/login，我会看到预期的登录屏幕。

这是我的 app.routes.js:

/*****
* Auth
******/
.state('app.auth', {
    abstract: true,
    url: '',
    template: '<div ui-view></div>',
    data: {
        allow: access.everyone
    }
})

.state('app.auth.login', {
    url: '/auth/login?redirect',
    templateUrl: 'modules/auth/login.html',
    controller: 'LoginController'
})

.state('app.auth.logout', {
    url: '/auth/logout',
    controller: 'LogoutController'
})

/*****
* Live
******/
.state('app.live', {
    abstract: true,
    url: '/live',
    data: {
        allow: access.live
    }
})

.state('app.live.index', {
    url: '/',
    templateUrl: 'modules/live/index.html'
});

是什么导致了这种奇怪的行为？

Answer 1

在这种情况下，我们会忘记解决问题：

用户已经 （之前） 重定向 === 用户将要 $state.go('app.auth.login') ... 不需要重定向

在这种情况下我们不应该重定向：

$rootScope.$on("$stateChangeStart", 
  function (event, toState, toParams, fromState, fromParams) {

   if (toState.name === 'app.auth.login')
   {
     // get out of here, we are already redirected
     return;
   }

一旦我们决定重定向，我们应该停止当前导航 event.perventDefault();

    if (!Auth.authorize(toState.data.allow)) {
        // here
        event.perventDefault();
        $state.go('app.auth.login', { redirect: toState.name });
    }
    ...

在这个 $stateChangeStart event continuing after state change or that Q & A 中查看更多示例，其中包含一个有效的 plunker

UI-路由器状态改变但 URL 和模板不改变

UI-Router state changes but URL and template don't

angularjs

angular-ui-router