ui-router不让我回到解决状态

时间:2017-10-14 21:52:55

标签: javascript angularjs angular-ui-router

我尝试在路由更改时调用服务来检查访问权限,如果访问是true将打开路由,如果没有,将转到设置路由

app.js:

        .state('home', {
            url: '/home',
            templateUrl: 'home.html',
            controller: 'homeController',
            resolve: {
                access: function(AuthService) {

                    return AuthService.getAccess();
                }
            }
        })

在我的homeCtrl:

app.controller('homeController', function ($scope, $timeout, $state, UserService, GroupService, SiteService, HomeService, AuthService, access) {


    // Check access: if true init route, else go to settings
    if(access) {
        Collections.init();
    } else {
        $state.go('settings');
    }

});

如果我切换到另一个没有任何决心的状态,我就无法切换回主页,按钮现在也没有做任何事情。

此外,我不是从homeCtrl处理设置的重定向,而是如何从解决方案中做到这一点,这不是一个更好的方法

使用Angular 1.5.x和UI-Router 0.2.18

编辑:

在我没有使用决心之前,而是

  $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
            AuthService.getAccess().then(function (access) {
                if (!access && toState.name !== "settings") {
                    event.preventDefault();
                    toastr.warning('Your trial has expired');
                    $state.go('settings');
                }
            });
        });

然而,我注意到我的UI有时会在authService.getAccess()完成之前加载,所以我遇到了竞争条件。

我开始解决,因为这让我更好地控制了应用程序流程。

1 个答案:

答案 0 :(得分:0)

您所做的另一种方法 - 为每个转换开始添加回调。

const app = angular.module('yourApplication');

app.run([
    '$state', '$transitions', 'authManager',
    function ($state, $transitions, authManager) {

        $transitions.onStart({from: ''}, function (transition) {
           const to = transition.$to();
           const routeName = to.name;

           if(!authManager.isAuthorizedRoute(routeName)) {
               // here you can substitute login with any other state
               // returning another target will break the transition and direct to another state
               return transition.router.stateService.target('login');
           }

           // if nothing is returned the transition will continue
        }
    }

]);

编辑:

由于getAccess是异步执行的 - 还有另一种解决方案:

1.创建一个父母状态,解决你的决心

$stateProvider.state('authorized', {
    resolve: {
       access: function(AuthService) {
          return AuthService.getAccess();
       }
    }
})

2.确定您所在州的父母州

.state('yourSTATE', {
     .....
     parent:      'authorized',
     ....
 })

3.处理$ transitions(https://github.com/angular-ui/ui-router/issues/2946)的成功以访问已解析的数据,然后决定转换是否成功并重定向到另一个目标

app.run([
    '$transitions',
    function ($transitions) {

        $transitions.onSuccess({}, function(transition) {
            var hasAccess = transition.getResolveValue('access');

            if(!hasAccess) {
               return transition.router.stateService.target('login');
            }
        });
     }
]);