{"action":"created","issue":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/1814","repository_url":"https://api.github.com/repos/angular-ui/ui-router","labels_url":"https://api.github.com/repos/angular-ui/ui-router/issues/1814/labels{/name}","comments_url":"https://api.github.com/repos/angular-ui/ui-router/issues/1814/comments","events_url":"https://api.github.com/repos/angular-ui/ui-router/issues/1814/events","html_url":"https://github.com/angular-ui/ui-router/issues/1814","id":60621372,"number":1814,"title":"What to do if resolve takes couple of seconds?","user":{"login":"SamVerschueren","id":1913805,"avatar_url":"https://avatars.githubusercontent.com/u/1913805?v=3","gravatar_id":"","url":"https://api.github.com/users/SamVerschueren","html_url":"https://github.com/SamVerschueren","followers_url":"https://api.github.com/users/SamVerschueren/followers","following_url":"https://api.github.com/users/SamVerschueren/following{/other_user}","gists_url":"https://api.github.com/users/SamVerschueren/gists{/gist_id}","starred_url":"https://api.github.com/users/SamVerschueren/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SamVerschueren/subscriptions","organizations_url":"https://api.github.com/users/SamVerschueren/orgs","repos_url":"https://api.github.com/users/SamVerschueren/repos","events_url":"https://api.github.com/users/SamVerschueren/events{/privacy}","received_events_url":"https://api.github.com/users/SamVerschueren/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-03-11T07:40:33Z","updated_at":"2016-02-28T03:44:24Z","closed_at":"2015-03-17T08:52:42Z","body":"Hi everyone\r\n\r\nI actually stumbled across the resolve and onEnter features of ui-router recently and I thought I could make use of this to create middlewares for my controllers. For instance, if you have pages that can only be accessed if the user is signed in, the same middleware can be used to first check if the user has access to the page requested.\r\n\r\nThis is how I do it\r\n\r\n```JavaScript\r\nvar middleware = angular.module('app.middlewares', []);\r\n\r\nmiddleware.constant('middleware', {\r\n    isAuthenticated: function() {\r\n        return {\r\n            resolve: {\r\n                user: ['$q', 'authModel', '$timeout', function($q, authModel, $timeout) {\r\n                    var deferred = $q.defer();\r\n\r\n                    authModel.findUser(function(err, user) {\r\n                        $timeout(function() {\r\n                            deferred.resolve(user);\r\n                        }, 5000);\r\n                    });\r\n\r\n                    return deferred.promise;\r\n                }]\r\n            },\r\n            onEnter: ['$state', '$timeout', 'user', function($state, $timeout, user) {\r\n                if(!user) {\r\n                    $timeout(function() {\r\n                        $state.go('auth');\r\n                    });\r\n                }\r\n            }]\r\n        };\r\n    }\r\n});\r\n```\r\n\r\nAnd this is my router\r\n```JavaScript\r\nvar routes = angular.module('app.routes', ['ui.router', 'app.middlewares']);\r\n\r\nroutes.config(['$stateProvider', '$urlRouterProvider', 'middleware', function($stateProvider, $urlRouterProvider, middleware) {\r\n    $urlRouterProvider.otherwise('/');\r\n\r\n    $stateProvider\r\n        .state('default', {\r\n            abstract: true,\r\n            templateUrl: 'app/views/includes/default.html',\r\n            controller: 'Controller'\r\n        })\r\n        .state('titlebar', {\r\n            abstract: true,\r\n            parent: 'default',\r\n            templateUrl: 'app/views/includes/titlebar.html',\r\n            controller: 'TitleBarController'\r\n        })\r\n        .state('auth', {\r\n            url: '/',\r\n            parent: 'default',\r\n            templateUrl: 'app/views/auth/signin.html',\r\n            controller: 'AuthController'\r\n        })\r\n        .state('home', _.extend(middleware.isAuthenticated(), {\r\n            url: '/home',\r\n            templateUrl: 'app/views/home/index.html',\r\n            parent: 'titlebar',\r\n            controller: 'HomeController'\r\n        }))\r\n        .state('titlebar.settings', _.extend(middleware.isAuthenticated(), {\r\n            url: '/settings',\r\n            templateUrl: 'app/views/settings/index.html',\r\n            controller: 'SettingsController'\r\n        }));\r\n}]);\r\n```\r\n\r\nAs you can see, I use lodash to extend from the isAuthenticated middleware everytime. This way I can easily reuse the same pieces of code.\r\n\r\nAs you can see, I added a timeout in the ```isAuthenticated``` middleware to resolve the user only after 5 seconds. This is just for testing purposes offcourse to see how the application reacts when the process runs slower.\r\n\r\nHow can I actually handle this if the resolve process is slow (for instance because of internet connection, ...)? What happens now is that the application hangs for 5 seconds and then suddenly pops up the page requested. Is someone experiencing the same issues?\r\n\r\nIs it good practice by using this 'middleware'-like approach or should/can it be done somewhere else? I want to avoid spoiling my controllers with all those checks over and over again.\r\n\r\nThanks in advance"},"comment":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/comments/189776014","html_url":"https://github.com/angular-ui/ui-router/issues/1814#issuecomment-189776014","issue_url":"https://api.github.com/repos/angular-ui/ui-router/issues/1814","id":189776014,"user":{"login":"oldtimeguitarguy","id":791071,"avatar_url":"https://avatars.githubusercontent.com/u/791071?v=3","gravatar_id":"","url":"https://api.github.com/users/oldtimeguitarguy","html_url":"https://github.com/oldtimeguitarguy","followers_url":"https://api.github.com/users/oldtimeguitarguy/followers","following_url":"https://api.github.com/users/oldtimeguitarguy/following{/other_user}","gists_url":"https://api.github.com/users/oldtimeguitarguy/gists{/gist_id}","starred_url":"https://api.github.com/users/oldtimeguitarguy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oldtimeguitarguy/subscriptions","organizations_url":"https://api.github.com/users/oldtimeguitarguy/orgs","repos_url":"https://api.github.com/users/oldtimeguitarguy/repos","events_url":"https://api.github.com/users/oldtimeguitarguy/events{/privacy}","received_events_url":"https://api.github.com/users/oldtimeguitarguy/received_events","type":"User","site_admin":false},"created_at":"2016-02-28T03:44:24Z","updated_at":"2016-02-28T03:44:24Z","body":"This might help? https://github.com/oldtimeguitarguy/angular-middleware"}}