AngularJSでのローカルストレージの作成

Question

私はangularjsにユーザベースのログインページを持っています。ユーザー名とパスワードが入力されると、URLが作成され、urlはID（数字など）を返します。このidに基づいてtab.htmlページが返されます（このページは顧客によって異なります）。私が直面している問題は、ログアウトをクリックするとログインページが表示されますが、まだ戻ってくるオプションがブラウザで利用できることです。つまり、ユーザーがログアウトしても、戻る矢印をクリックして前の機密ページに移動できます。ここで

は状態が呼び出されるかのコードです：

以下

var wc = angular.module('wc', ['ui.router', 'am.multiselect', 'angularUtils.directives.dirPagination', 'ui.bootstrap', 'ui.bootstrap.datetimepicker', 'LocalStorageModule']); 

wc.config(function ($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise('/login'); 
$stateProvider 
     .state('login', { 
      url: '/login', 
      templateUrl: 'views/login.html', 
      controller: 'LoginCtrl' 
     }) 

    .state('logout', { 
     cache: false, 
     url: '/logout', 
     templateUrl: 'views/logout.html', 
     controller: 'LogoutCtrl' 
    }) 


    .state('tab', { 
    url: '/tab/:id', 
    templateUrl: 'views/tab.html' 
    }); 

は、ログアウトして、ログインコントローラのコードです：

以下

wc.controller('LogoutCtrl', function ($scope, $http, $location) { 
$location.path('/tab'); 
}); 
wc.controller('LoginCtrl', function ($scope, $http) { 
    $scope.submit = function() { 
    $http.get("urlUserName=" + $scope.person.firstName + "&Password=" + $scope.person.pswd)//Sample Url// 
    .success(function (data, status, headers, config) { 
     debugger 
     $scope.tableData = data; 
     console.log(data) 
     if (data == 'Exception') { 
      window.alert('You have entered wrong username or password'); 

     } 
     else $state.go('tab', { id: data.Table[0].UserId }); 
    }) 
}}); 

は、ログインページ内のフォームのコードです：

<form ng-submit=submit()> 
      <div class="input-container"> 
       <input type="text" id="Username" ng-model="person.firstName" required="required" /> 
       <label for="Username">Username</label> 
       <div class="bar"></div> 
      </div> 
      <div class="input-container"> 
       <input type="password" id="Password" ng-model="person.pswd" required="required" /> 
       <label for="Password">Password</label> 
       <div class="bar"></div> 
      </div> 
      <div class="submit">    
       <input type="submit" value="LOGIN"> 
      </div> 
     </form> 

私はlocalStorageを使用しなければならないことを理解し、以下のようにコードに追加しました。

<script src="bower_components/js/angular-local-storage.min.js"></script> 
var myApp = angular.module('myApp', ['LocalStorageModule']); 
    myApp.controller('LoginCtrl', function($scope, localStorageService) { 
    var lsKeys = localStorageService.keys();//to show all values 
    function submit(key, val) { 
return localStorageService.set(key, val); } 
function removeItem(key) { 
    return localStorageService.remove(key); } 
    }); 

しかし、上記のコードは機能しませんでした。ここでローカルストレージを使用するにはどうすればよいですか？誰かが私をここで助けることができれば、感謝します！

Answer 1

私は角度ローカルストレージを使用していません。あなたが提供するサービスの代わりにwindow.localStorageまたはchrome.storageオブジェクトに直接アクセスできないのはなぜですか？

以下のコードスニペットは、値を取得してlocalStorageに設定します。

localStorageオブジェクトに値をアクセス/書き込みするには、以下のコードを使用します。

appLocalStorage.setObject('appObjects', appObjects); 
var appObjects = appLocalStorage.getObject('appObjects'); 

Answer 2

わからないけれども：私はあなたのfunctionに正しいkey and valueを渡している、あなたはあなたのビューで機能を提出してい参照してください。あなたは、ルーティングのその時点で、ここで解決コンセプトを使用することができます

function submit(key, val) { 
    return localStorageService.set(key, val); } 

function removeItem(key) { 
    return localStorageService.remove(key); } 
}); 

Answer 3

、あなただけ行う必要がありますあなたの$ routeProviderである：

しかし、それは私がのその時点で、ローカルストレージについてお聞かせする前に

$window.localStorage.setItem('user_profile',JSON.stringify(user));// user = your user details of json. 
$window.localStorage.setItem('is_login',true); 

そして、このようにすべての最初は、ローカルストレージにユーザーの詳細を保存し、その後のようなローカルストレージからユーザーを取得する：あなたがあなたのサービスを呼び出すと、このようなローカルストレージにユーザーの詳細を格納する必要がありますログイン

var user_tmp = $window.localStorage.getItem('user_profile'); 
       return JSON.parse(user_tmp); 

は、これは、今、あなたのjsの中にその後その後

.state('login', { 
      url: '/login', 
      templateUrl: 'views/login.html', 
      controller: 'LoginCtrl', 
      resolve: {login: checkLogin} 
     }) 

は、あなたがcheckloginを定義することができ、ファイル、URLが変更とすべてのページにアクセスするたびの認証チェックの話を聞かせてローカルストレージの概念でしたこの認証のためのルーティングが行われるすべての時間を確認するには、チェックログインから戻るに基づいて

var checkLogin = function ($q, $location, Auth, $rootScope, Auth) { 
    console.log('checkLogin...') 
    var deferred = $q.defer(); // Make an AJAX call to check if the user is logged in 
    console.log("call checkLoggedin..."); 
    /** 
    * Check Profile is exits or not Otherwise return login page 
    **/ 
    if (!Auth.checkLogin()) { 
     $rootScope.is_login = false; 
     deferred.reject(); 
     $location.path('/login'); 
    } 
    else { 
     $rootScope.is_login = true; 
     $rootScope.loggedInUserDetails = Auth.getUserLocal(); 
     deferred.resolve(); 
    } 
    return deferred.promise; 
} 

あなたが認証mechenisamを確立できるような関数。

Answer 4

私はそれが助けてくれることを願う私はあなたにステップを実行する方法を提供します：

1. ユーザーにログインします。ログインが成功した場合は、localstorageを設定し、 'tab'ページにリダイレクトします。それ以外の場合はエラーを表示します。
2. ユーザーがログアウトした場合は、localstorageキーを削除し、「ログイン」ページにリダイレクトします。
3. HttpInterceptorを使用して、各ページ遷移時にユーザーがログインしているかどうかを検証します。ここでは、あなたのバックキーは、ユーザーがログインするまで「タブ」ページに移動しません。

参考のため、私はこれらのリンクを提案します。

https://stackoverflow.com/a/27698084/6124000

http://onehungrymind.com/winning-http-interceptors-angularjs/