wie Staaten in angular js zu authentifizieren

Question

Ich möchte Staaten in meiner eckigen Anwendung authentifizieren. Die verfügbaren Ressourcen sind zu kompliziert und ich verstehe nicht warum.

Meine einfache Logik ist eine Variable

$rootScope.is_authenticated = true 

eingestellt und kontrolliert werden, wann immer ein Zustand geladen wird, um zu sehen, ob die Variable wahr ist oder nicht.

Wie kann ich dies erreichen und warum ist Login und Authentifizierung so kompliziert in eckigen.

meine Config-Datei

.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-Funktion in meinem 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-Funktion

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

Ich habe eine andere Eigenschaft zu meinem Zustand hinzugefügt, lösen. Nun kann der Staat nur zugegriffen werden, wenn der Benutzer angemeldet ist. Ist dies der richtige Weg, und wenn nicht, was sind die damit verbundenen Probleme

Answer 1

I Login erreicht haben, Authentifizierung durch Winkellauf und Service-Methoden zu schaffen

Mein Code-Schnipsel:

routes.js: // Aktualisieren Sie Ihren Code mit beglaubigen Schlüssel

.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 this to the routes you want the users' should be 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 to be 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 the code here to consume your http post, I use ng-resource so code is according to that 
      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 
     }; 
    } 
})();