在 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

您可以在路由时在此处使用解析概念，您只需在 $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;
}

根据检查登录返回，您可以建立身份验证机制。

Answer 2

我没有使用 angular-local-storage。 为什么不能直接访问 window.localStorage 或 chrome.storage 对象而不是 angular 提供的服务。

下面的代码片段获取和设置 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 3

但不确定：我看到您的视图中有提交功能，您是否将正确的key and value传递给您的function 。

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

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

Answer 4

好的。 我希望它会有所帮助。 我会给你步骤，如何执行它：

1. 登录用户。 如果登录成功，设置本地存储并重定向到“标签”页面，否则显示错误。
2. 如果用户注销，则删除 localstorage 密钥并重定向到“登录”页面。
3. 使用 HttpInterceptor 将验证用户是否在每个页面转换时登录。 在这里，除非用户登录，否则您的后退键永远不会进入“标签”页面。

供您参考，我会建议这些链接。

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

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