在AngularJS中创建本地存储

Creation of Local Storage in AngularJS

本文关键字：存储 创建 AngularJS      更新时间：2023-09-26

我在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); }
  });

但是上面的代码不起作用。我如何在这里使用本地存储?将不胜感激，如果有人可以帮助我这里!!

你可以在路由的时候在这里使用解析的概念，你只需要在你的$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;
}
基于check登录的返回，可以建立认证机制

我没有使用angular-local-storage。你为什么不能进入窗口。localStorage或chrome。直接存储对象，而不是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');

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

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

好的。我希望它会有所帮助。我将告诉你如何执行它的步骤:

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

我将这些链接推荐给你参考。

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

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

相关文章：