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中执行：

但在此之前请告诉我有关本地存储的信息，在登录时您需要调用您的服务并将用户详细信息存储在本地存储中，如下所示：

.Result

首先将用户详细信息存储在本地存储中，然后从本地存储中获取用户：

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

所以这就是本地存储的概念，现在让我们谈谈每当url更改并访问每个页面时的身份验证检查，

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

然后，在你的js文件中，你可以定义一个这样的checklogin函数，以便在路由占用时检查身份验证，

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

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

Answer 2

我没有使用过角度局部存储。为什么不能直接访问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 3

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

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

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

Answer 4

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

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

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

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

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

在AngularJS中创建本地存储

4 个答案: