3

Right now I have a simple angular set up that has a login state and a cloud state. I want to make it so the cloud state can only be run if a user is authenticated. And if not, it will direct them to the login state.

So far I believe I have the "resolve" setup and I have the .run() function set up to redirect to the login state if there the resolve fails.

I am just having trouble figuring out how I can make authenticated: authenticated get what I need. I know I have to make an authenticated function somewhere, I just don't know the correct way at going about it.

I'm new to angular, so If anyone has any suggestions, I'd gladly appreciate them.

var routerApp = angular.module('app', ['ui.router'])

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/cloud');

    $stateProvider

        .state('login', {
            url: '/login',
            templateUrl: "pages/templates/login.html"
        })

        .state('cloud', {
            url: '/cloud',
            templateUrl: "pages/templates/account.html",
            resolve: { authenticated: authenticated }
        })

})
.run(function ($rootScope, $state, $log) {
    $rootScope.$on('$stateChangeError', function () {
        $state.go('login');
    });
});
bryan
  • 8,879
  • 18
  • 83
  • 166
  • You can actually put your function in that same resolve block, or reference another service. This is a bit dense but will really show you the right way: http://stackoverflow.com/questions/22537311/angular-ui-router-login-authentication – cerd Apr 29 '15 at 03:01
  • @cerd this is a bit over my head. thanks for the link tho, this has been the only example i've been able to come across – bryan Apr 29 '15 at 04:02

1 Answers1

8

There is nothing so complicated about resolve, check the documentation:

Resolve

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.

...

Examples:

Each of the objects in resolve below must be resolved (via deferred.resolve() if they are a promise) before the controller is instantiated. Notice how each resolve object is injected as a parameter into the controller.

$stateProvider.state('myState', {
    resolve:{

       // Example using function with simple return value.
       // Since it's not a promise, it resolves immediately.
       simpleObj:  function(){
          return {value: 'simple!'};
       },
       ...

In case you want some working plunker, there is similar Q & A:

If we would like to get DRY into play, we should start to think about state hierarchy (parent / child / ...). As discussed here:

We can introduce some super 'root' state for some general purpose:

$stateProvider
  .state('root', {
    abstract : true,
    // see controller def below
    controller : 'RootCtrl',
    // this is template, discussed below - very important
    template: '<div ui-view></div>',
    // resolve used only once, but for available for all child states
    resolve: {
      user: function (authService) {
          return authService.getUserDetails();
      }
    }
  })

That would mean, that each child state, will be provided with resolve (already being resolved) for grand-parent ('root').

In case, we want to distinguish parent and child resolves we can do that, with default resolve names... Check the details here:

In case we would like also to solve deny, we can just ask for $state provider and redirect. The best place would be some kind of change state listener. There is a detailed description how to use $rootScope.$on('$stateChangeStart', for authentication purposes

Confusing $locationChangeSuccess and $stateChangeStart

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thank you for the long response. I appreciate it. If there is more than one state that needs that resolve, I'd rather not repeat the function over and over gain. My issue is more or less how to not have to repeat myself and how to deny a promise – bryan Apr 29 '15 at 04:02
  • I extended my answer with more details, and included other references with clear and working plunkers. That, I'd say, is the best way you can achieve "understanding" of the awesome UI-Router. Hope it helps a bit ;) – Radim Köhler Apr 29 '15 at 05:18
  • @bryan you can make a parent state and all your states which need authentication to be the child of that state. That way you only have to add resolve to the parent state. – Himanshu Mittal Apr 29 '15 at 06:29