intercept route and redirect to login

Question

Take the following code. I have a cookie that is created once a user successfully logs in. My API is also already authenticated. What I am looking to do is do a simple check of the cookie before serving up a route, with the only exception of the login route.

angular
    .module('pizzaGiants.routes', ['ui.router'])
    .config(['$stateProvider', '$locationProvider', '$urlRouterProvider',

        function ($stateProvider, $locationProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/login');

            // Application Routes
            // -----------------------------------
            // add check if cookie exists else redirect to login
            $stateProvider
                .state('login', {
                    url: '/login',
                    templateUrl: 'features/login/login.html',
                    controller: 'loginCtrl'
                })
                .state('attributes', {
                    url: '/attributes',
                    templateUrl: 'features/attributes/attributes.html',
                    controller: 'attributesCtrl'
                })
                .state('users', {
                    url: '/users',
                    templateUrl: 'features/users/users.html',
                    controller: 'usersCtrl'
                })
                .state('signup', {
                    url: '/signup',
                    templateUrl: 'features/signup/signup.html',
                    controller: 'signupCtrl'
                })
                .state('roles', {
                    url: '/roles',
                    templateUrl: 'features/roles/roles.html',
                    controller: 'rolesCtrl'
                })
                .state("fruits", {url: "/fruits",templateUrl: "features/fruits/fruit.html",controller: "fruitCtrl"}).state("colors", {url: "/colors",templateUrl: "features/colors/color.html",controller: "colorCtrl"}).state("contacts", {url: "/contacts",templateUrl: "features/contacts/contact.html",controller: "contactCtrl"})

}]);

Possible duplicate of [Redirecting to a certain route based on condition](http://stackoverflow.com/questions/11541695/redirecting-to-a-certain-route-based-on-condition) — Santhosh, Mar 29 '16 at 07:17

score 0 · Accepted Answer · answered Mar 29 '16 at 07:24

0

Could be like following

app.run([
'$rootScope','$location', '$timeout',
    function ($rootScope, $location, $timeout) {
        $rootScope.$on('$stateChangeStart', function () {
            if (// your condition logic) {
                    $timeout(function () {
                        $location.path("/login");
                    }, 1);
            }
        });
    }
]);

answered Mar 29 '16 at 07:24

TheKingPinMirza

7,924
6
51
81

This works most of the times but sometimes the route still loads. – CodeMilian Mar 30 '16 at 04:27
I ended doing a hack for now while I keep working on a cleaner way but thanks a lot. setTimeout(function(){ window.location = ("/#login"); }, 1); setTimeout(function(){ window.location = ("/#login"); }, 50); setTimeout(function(){ window.location = ("/#login"); }, 100); setTimeout(function(){ window.location = ("/#login"); }, 250); I'll flag this as an answer. The other problem with this is that a flickers a bit. – CodeMilian Mar 30 '16 at 04:40

intercept route and redirect to login

1 Answers1