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

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

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中查看更多内容，或使用有效工具的Q & A查看

UI-Router状态更改但URL和模板不更改

1 个答案: