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:
- ui router resolve throwing error provider not found
- angular-ui state - multiple views not seeing resolve data
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
Comments
Post a Comment