Angularjs UI路由器状态更改，但URL和模板不'；T

我正在做一些类似这样的更改授权：

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

。这显示在控制台中。日志s:

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'
});

/*****
*认证
******/
.state（'app.auth'{
摘要：没错，
url:“”，
模板：“”，
数据：{
允许：访问。所有人
}
})
.state（'app.auth.login'{
url:“/auth/login？重定向”，
templateUrl:'modules/auth/login.html'，
控制器：“登录控制器”
})
.state（'app.auth.logout'{
url:“/auth/logout”，
控制器：“LogoutController”
})
/*****
*生活
******/
.state（'app.live'{
摘要：没错，
url:“/live”，
数据：{
允许：access.live
}
})
.state（'app.live.index'{
url:“/”，
templateUrl:'modules/live/index.html'
});

---

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

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

• 用户已（以前）重定向===用户将进入

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

---

查看更多示例，例如使用工作plunker的本页或本页

我认为您应该使用resolve（Promissions）而不是“stateChangeStart”。因为stateChangeStart在刷新页面时也会产生问题，但会删除第二个“Authorized”，但我仍然停留在同一个未经授权的页面上。我更新了我的答案，另外，请检查此详细示例和工作日志