ui-router $state.go based on user cookie

Question

Is there a way to redirect a user to a specific state based on data from cookies when using ui-router?

I tried to do it from the .config() but since I'm not able to inject other dependencies it wasnt working.

I also tried to do it on the .run() block, but it just gives a loop (of course).

This is what I first tried on the .config()

 function ConfigRouter($locationProvider, $stateProvider, $urlRouterProvider, Constant, localStorageService) {
    $locationProvider.html5Mode(true);

    $urlRouterProvider.when('/', function($injector) {
        var $state = $injector.get('$state');
        checkState($state);
    });
    $urlRouterProvider.when('', function($injector) {
        var $state = $injector.get('$state');
        checkState($state);
    });
    $urlRouterProvider.otherwise(function($injector) {
        var $state = $injector.get('$state');
        $state.go('error');
    });

    function checkState($state) {
        var userCookie = localStorageService.cookie.get(Constant.cookieName);
        if(userCookie.type == 1) {
            $state.go('home-app');
        } else if (userCookie.type == 2) {
            $state.go('home-client');
        } //and so on
    }

}

Is there a way to do it? Or other way to achieve the same result? Basically I need to send the user to a different portion of the app based on the users role. If he is an admin, client, moderator, etc.. Each one has an specific app and need to retrieve specific data from server, this is why i want to do it, so i can request the data on the resolve of each state.

score 1 · Answer 1 · edited May 23 '17 at 12:17

If you are using angular ui router, you can use resolve on the top state, there you can inject services which helps you to verify the cookie

you can also intercept and do it during

.run(["$rootScope", "$location", "$state", "services.userService", function ($rootScope, $location, $state) {
        $rootScope.$on('$stateChangeStart', function (e, toState, toParams
            , fromState, fromParams) {
// validation
});

more info https://github.com/angular-ui/ui-router/wiki#resolve

and examples here angular ui-router login authentication

Defer Angular UI Router $stateChangeStart until server authorization response receieved

ej:

    .state('main', {
                    templateUrl: 'app/modules/home/view.html',
                    abstract: true,
                    resolve: {
                        authorize: ['userService', "$state", "$q",  
                            function (userService, $state, $q) {
                                return checkAuthorization(userService, $state, $q)
                                    .then(function (user) {
                                        return {user: user}
                                    });
                            }]
                    },
                    controller: 'RootController'
                })
// more states

var checkAuthorization = function(userService, $state){
    //do all the necessary checks and return the user if he is already logged in
//redirecct to other page if the check failed
}

score 0 · Answer 2 · answered Sep 13 '17 at 10:46

I did user check in the .run section:

.run(['$rootScope', '$state', '$cookies',
    function ($rootScope, $state, $cookies) {
        if ($cookies.get('token'))
            $state.go('main');
        else
            $state.go('guest)
    }]);

Of course than you should install 'token' in cookie. And now you don't need $urlRouterProvider in .config

ui-router $state.go based on user cookie

2 Answers2