ローカルストレージを使用してAngularJSデータを保存する

Question

現在、$rootScopeを使用してユーザー情報を保存しているかどうか、またユーザーがログインしているかどうかを確認しています。$window.localStorageを使用しようとしましたが、私の目標は、ユーザーがログインした後、ナビゲーションバーにアイテムを表示したり、ユーザー名をナビゲーションバーに表示させたり、個々のユーザープロファイルビュー、すべてのユーザービューなどを表示させることです。永続的なログインが必要です。私は$rootscopeと一緒に働くnavbarを持っていますが、私が試して$window.localStorageに移行しようとすると失敗します。ここで$rootScopeを使用したコードは次のとおりです。

mainModule

angular.module('mainModule', [ 
     'ui.router', 
     ... 
    ]) 
    .config(configFunction) 
    .run(['$rootScope', '$state', 'Auth', function($rootScope, $state, Auth) { 
     $rootScope.$on('$stateChangeStart', function(event, next) { 
      if (next.requireAuth && !Auth.getAuthStatus()) { 
       console.log('DENY'); 
       event.preventDefault(); 
       $state.go('login'); 
      } else if (Auth.getAuthStatus() || !Auth.getAuthStatus()) { 
       console.log('ALLOW'); 
      } 
     }); 
    }]); 

認証工場

angular.module('authModule').factory('Auth', ['$http', '$state', function authFactory($http, $state) { 
     var factory = {}; 

     var loggedIn = false; 
     var userData = {}; 

     factory.getAuthStatus = function() { 
      $http.get('/api/v1/auth') 
       .success(function(data) { 
        if (data.status == true) { 
         loggedIn = true; 
        } else { 
         loggedIn = false; 
        } 
       }) 
       .error(function(error) { 
        console.log(error); 
        loggedIn = false; 
       }); 
      return loggedIn; 
     } 

     return factory; 
    }]); 

ログインコントローラ

function SigninController($scope, $rootScope, $http, $state) { 
    $scope.userData = {}; 

    $scope.loginUser = function() { 
     $http.post('api/v1/login', $scope.userData) 
      .success((data) => { 
       $scope.userData = data.data; 
       $rootScope.loggedIn = true; 
       $rootScope.userData = data; 
       $state.go('home'); 
      }) 
      .error((error) => { 
       console.log('Error: ' + error); 
      }); 
    }; 
} 

ここでは

ナビゲーションコントローラ

function NavbarController($scope, Auth) { 
    $scope.loggedIn = Auth.getAuthStatus(); 
} 

EDIT編集編集

は、私は、ローカルストレージを使用しています方法です。これらは変更された唯一のものです。

ログインコントローラ

function SigninController($scope, $window, $http, $state) { 
    $scope.userData = {}; 

    $scope.loginUser = function() { 
     $http.post('api/v1/login', $scope.userData) 
      .success((data) => { 
       $scope.userData = data.data; 
       $window.localStorage.setItem('userData', angular.toJson(data)); 
       $window.localStorage.setItem('loggedIn', true); 
       $state.go('home'); 
      }) 
      .error((error) => { 
       console.log('Error: ' + error); 
      }); 
    }; 
} 

認証工場

angular 
    .module('authModule') 
    .factory('Auth', ['$http', '$window', '$state', function authFactory($http, $window, $state) { 
     var factory = {}; 

     factory.getAuthStatus = function() { 
      $http.get('/api/v1/auth') 
       .success(function(data) { 
        if (data.status == true) { 
         $window.localStorage.setItem('loggedIn', true); 
        } else { 
         $window.localStorage.setItem('loggedIn', false); 
        } 
       }) 
       .error(function(error) { 
        console.log(error); 
        $window.localStorage.setItem('loggedIn', false); 
       }); 
      return $window.localStorage.getItem('loggedIn'); 
     } 

     return factory; 
    }]); 

Answer 1

私はlocalStorage.getItem('loggedIn')の使用に伴う潜在的な問題を参照してください。

文字列'false'が返される場合は、実際にあなたが入れブールの文字列化バージョンである何を取り戻すのlocalStorageのみが格納された文字列は、。、メインモジュール内!Auth.getAuthStatus()の小切手は、例えば、常にのでfalseブールと評価されますのでJavaScriptの空でない文字列は "真実"です。

すなわち!'false' === false（!true === falseと同じ）

あなたはのlocalStorageの値にJSON.parseを使用することで、この上で取得することができます。例えばJSON.parse(localStorage.getItem('loggedIn'))は、文字列'false'をブール値falseに解析します。

Answer 2

$window.localStorageをwindow.localStorageに置き換えるだけで問題ありません。例えば

：これは、のlocalStorage（またはのsessionStorage）で認証ステータスを記憶する、前記さ

function SigninController($scope, $window, $http, $state) { 
    $scope.userData = {}; 

    $scope.loginUser = function() { 
     $http.post('api/v1/login', $scope.userData) 
      .success((data) => { 
       $scope.userData = data.data; 
       window.localStorage.setItem('userData', angular.toJson(data)); 
       window.localStorage.setItem('loggedIn', true); 
       $state.go('home'); 
      }) 
      .error((error) => { 
       console.log('Error: ' + error); 
      }); 
    }; 
} 

がダウンするための良いパスではありません。両方のキーと値のペアは、開発者ペインで読み取られ、その後、コンソールを介して変更されます（詐称されます）。より良い解決策は、成功したログイン後に一意の値（GUID）を返し、サーバーで読み取ってそこで確認できるクッキー（20分などの短い時間で期限が切れるように設定）に格納することです。これには$cookieを使用することができます。ユーザーのログイン状態は、クライアント側ではなくサーバー側で制御する必要があります。クライアントは、常に認証されていることを証明する必要があります。

ログインを維持するには、訪問者を処理するサービスを作成し、そのサービスがログイン/ログアウトを処理し、ログインの証拠を提供させるようにします。ログインしている証拠は、サービスとその外部にアクセスできない。これを行う

(function() { 
    'use strict'; 

    var visitorModelService = ['$http', function ($http) { 
      var loggedIn = false, 
       visitorModel = { 
        login:function(){ 
         //do login stuff with $http here 
         //set loggedIn to true upon success 
        }, 
        loggedIn:function(){ 
         return loggedIn; 
        }, 
        logout:function(){ 
         //do logout stuff with $http here 
         //no matter what, set loggedIn to false 
        } 
      }; 
      return visitorModel; 
     }]; 

    var module = angular.module('models.VisitorModel', []); 
    module.factory('VisitorModel', visitorModelService); 
}()); 

、単にあなたのng-showにvisitor.loggedInをチェックし、集中管理のすべてを持つことができます。以下のような：

<a ng-click='visitor.logout' ng-show='visitor.loggedIn'>Log Out</a> 

いっそのこと、エン質量それらを表示/ divタグに認証されたユーザーにのみ表示される要素を入れて非表示にします。