javascript - 在 AngularJS 中创建本地存储

Question

我在 angularjs 中有一个基于用户的登录页面。输入用户名和密码后，会构建一个 url，该 url 返回一个 id(比如一个数字)。根据这个id返回tab.html页面(这个页面对于不同的客户是不同的)。现在我面临的问题是，当单击注销时，会显示登录页面，但浏览器中仍然可以使用返回选项，这意味着即使用户注销，他也可以单击后退箭头转到上一个 secret 页面。

以下是如何调用状态的代码:

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

以下是注销和登录 Controller 的代码:

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

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