javascript - Angularjs using UI-Router Resolve for Authentication -


right have simple angular set has login state , cloud state. want make cloud state can run if user authenticated. , if not, direct them login state.

so far believe have "resolve" setup , have .run() function set redirect login state if there resolve fails.

i having trouble figuring out how can make authenticated: authenticated need. know have make authenticated function somewhere, don't know correct way @ going it.

i'm new angular, if has 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');     }); }); 

there nothing complicated resolve, check documentation:

resolve

you can use resolve provide controller content or data custom state. resolve optional map of dependencies should injected controller.

if of these dependencies promises, resolved , converted value before controller instantiated , $statechangesuccess event fired.

...

examples:

each of objects in resolve below must resolved (via deferred.resolve() if promise) before controller instantiated. notice how each resolve object injected parameter controller.

$stateprovider.state('mystate', {     resolve:{         // example using function simple return value.        // since it's not promise, resolves immediately.        simpleobj:  function(){           return {value: 'simple!'};        },        ... 

in case want working plunker, there similar q & a:

if dry play, should start think state hierarchy (parent / child / ...). discussed here:

we can introduce super 'root' state general purpose:

$stateprovider   .state('root', {     abstract : true,     // see controller def below     controller : 'rootctrl',     // template, discussed below - important     template: '<div ui-view></div>',     // resolve used once, available child states     resolve: {       user: function (authservice) {           return authservice.getuserdetails();       }     }   })  

that mean, each child state, provided resolve (already being resolved) grand-parent ('root').

in case, want distinguish parent , child resolves can that, default resolve names... check details here:

in case solve deny, can ask $state provider , redirect. best place kind of change state listener. there detailed description how use $rootscope.$on('$statechangestart', authentication purposes

confusing $locationchangesuccess , $statechangestart


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -