javascript - how to authenticate states in angular js -

i want authenticate states in angular application. resources available complicated , don't understand why.

my simple logic set variable

$rootscope.is_authenticated = true 

and check whenever state loaded see if variable true or not.

how can achieve , why login , authentication complicated in angular.

my config file

.config(function($stateprovider,$urlrouterprovider) { $stateprovider     .state('auth', {         url: '/auth',         templateurl: 'partials/auth.html',         controller: 'authctrl'     })     .state('dashboard', {         url: '/dashboard',         templateurl: 'partials/dashboard.html',         controller: 'dashboardctrl',         resolve:{             check: function($rootscope, $state){                 if($rootscope.is_authenticated == true){                     return true;                 }                 else{                     $state.go('auth');                 }             }         }     })      $urlrouterprovider     .otherwise("/auth"); 

login function in authctrl

//login $scope.login = function(user){     console.log(user);     $http({         method : "post",         url : "myapi.com/login",         data : user     }).then(function mysucces(response) {         $scope.data = response.data;         $rootscope.is_authenticated = true;         $state.go('dashbooard');     }, function myerror(response) {         $scope.error = response.statustext;         $rootscope.is_authenticated = false;     }); } 

logout function

 $scope.logout = function(){     $rootscope.is_authenticated = false;     $state.go('auth'); } 

i've added property state, resolve. state can accessed if user logged in. correct way , if not, problems associated it

i have achieved login, authentication creating angular's run , service methods

my code snippet :

routes.js : // updating code authenticate key

.config(function($stateprovider,$urlrouterprovider) { $stateprovider     .state('auth', {         url: '/auth',         templateurl: 'partials/auth.html',         controller: 'authctrl'     })     .state('dashboard', {         url: '/dashboard',         templateurl: 'partials/dashboard.html',         controller: 'dashboardctrl',         authenticate: true // add routes want users' should authenticated     })      $urlrouterprovider.otherwise("/auth"); 

run.js :

(function () {     'use strict';      angular.module('app').run(runblock);      runblock.$inject = ['$rootscope', '$state', '$log', 'authservice'];      function runblock($rootscope, $state, $log, authservice) {         // detects change of state started         var rootscopeon = $rootscope.$on('$statechangestart', function (event, next, params) {             // next.authenticate - if states needs authenticated             if (next.authenticate && !$rootscope.currentuser) {                 event.preventdefault();                   if (authservice.isloggedin()) {                     authservice.getloggedinuser().then(function (response, status) {                         $log.debug('run - runblock() - status : ', status);                         if (!response) {                             $state.go('login');                         } else {                             $state.go(next, params);                         }                     }, function () {                         $log.error('run - runblock() : error');                         $state.go('login');                     });                 } else {                     $state.go('login');                 }             }         });         $log.debug('run - runblock() - rootscopeon : ', rootscopeon);     } })(); 

auth.js :

(function() {     'use strict';      angular.module('app').factory('authservice', authservice);      function authservice($http, $q, $log, $rootscope, user) {         function login(email, password) {             // todo : change code here consume http post, use ng-resource code according             return user.login({ username: email, password: password }).$promise.then(function(response) {                 $rootscope.currentuser = {                     id: response.user.id,                     email: response.user.email,                     userame: response.user.username,                     emailverified: response.user.emailverified                 };             });         }          function logout() {             return user.logout().$promise.then(function() {                 $rootscope.currentuser = null;             });         }          function isloggedin() {             return user.isauthenticated();         }          function getuserinfo() {             return $rootscope.currentuser;         }          function setuserinfo(data) {             $rootscope.currentuser = {                 id: data.id,                 role: data.role,                 email: data.email,                 userame: data.username,                 emailverified: data.emailverified             };         }          function getloggedinuser() {             var deferred = $q.defer();             user.getcurrent().$promise.then(function(response) {                 if(angular.isdefined(response.error)) {                     if(response.error.status === 401) {                         deferred.resolve(false);                     }                     else {                         setuserinfo(response);                         deferred.resolve(getuserinfo());                     }                 }                 else {                     setuserinfo(response);                     deferred.resolve(getuserinfo());                 }             });             return deferred.promise;         }          function register(email, password) {             return user.create({                 email: email,                 password: password             }).$promise;         }          return {             login: login,             logout: logout,             register: register,             isloggedin : isloggedin,             getuserinfo: getuserinfo,             getloggedinuser: getloggedinuser         };     } })();