Создание локального хранилища в AngularJS

Question

У меня есть пользовательская страница входа в angularjs. Когда введено имя пользователя и пароль, создается URL-адрес и этот url возвращает идентификатор (например, число). На основе этого идентификатора возвращается страница tab.html (эта страница отличается для разных клиентов). Теперь проблема iam сталкивается, когда нажата кнопка выхода из системы, отображается страница входа в систему, но опция возврата обратно доступна в браузере, что означает, что даже если пользователь выйдет из системы, он может нажать на стрелку назад, чтобы перейти на предыдущую конфиденциальную страницу.

Вот код, как называются состояния:

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.

var appLocalStorage; 
    appLocalStorage = appLocalStorage || (function() { 
     return { 
      setObject: function (objectName, objectValue) { 
       if (window && window.localStorage) { 
        window.localStorage.setObject(objectName, objectValue); 
       } 
       else if (chrome && chrome.storage && chrome.storage.local) { 
        var dataObj = {}; 
        dataObj[objectName] = objectValue; 
        chrome.storage.local.set(dataObj, function() { 

        }); 
       } 
      }, 
      getObject: function (objectName) { 
       if (window && window.localStorage) { 
        return window.localStorage.getObject(objectName); 
       } 
       else if (chrome && chrome.storage && chrome.storage.local) { 
        chrome.storage.local.get(objectName, function (data) { 
         if (chrome.runtime.lastError) { 
          return; 
         } 
         return data; 
        }); 
       } 
      }, 

     }; 

    })(); 

Для доступа/записи значений к объекту localStorage используйте код ниже.

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

Answer 2

Не уверен, хотя: Я вижу, у вас есть представить функцию на ваш взгляд, вы передавая правильную key and value вашему function.

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); 

Так что это была концепция локального хранилища, теперь давайте поговорим о проверке подлинности, когда URL будет меняться, и доступ ко всем страницам,

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

Тогда после этого, в ваших JS файл, который вы можете определить checklogin функция, как это проверить для аутентификации все время, когда маршрутизация будет занимать место,

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. Вход пользователя. Если login successfull, установите localstorage и переадресуйте страницу «вкладка», иначе отобразите ошибку.
2. Если пользователь вышел из системы, удалите ключ localstorage и переадресуйте его на страницу входа.
3. Используйте HttpInterceptor, который будет проверять, вошел ли пользователь во вход или нет при каждом переходе на страницу. Здесь ваш задний ключ никогда не переходит на страницу «вкладки» до тех пор, пока пользователь не войдет в систему.

Для справки, я предложу эту ссылку.

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

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