如何在AngularJS中隐藏URL中的选择性数据

How to hide selective data in URLs in AngularJS

本文关键字：选择性 数据 URL 隐藏 AngularJS      更新时间：2024-05-01

我正在AngularJs中为SPA编写代码。我在这里使用ui-router而不是ngRoute来路由和控制导航。在我的应用程序中，有一种情况是我通过url传递userId以编辑特定用户的信息。

我对特定情况的路由如下：

.state('user-edit', {
  url: '/users/:uId/:operation',
  templateUrl: 'views/user.html',
  controller: 'UserCtrl'
})

我的相关标记是：

<td><a ng-href='#/users/{{user.id}}/edit'><img src="images/edit-icon20.png"></a></td>

我的控制器的一部分：

if ($stateParams.operation == 'edit'){ 
   *My Logic*
}

我的URL现在显示为：

http://localhost:8080/#/users/3/edit

问题：
在这个或这样的URL中，我不希望用户看到我的userID。我要么希望它被显示为其他东西，要么希望它完全隐藏起来。我已经讨论了AngularJS的问题：如何清除URL中的查询参数？这里是Stackoverflow，但这对我没有帮助，因为我的URL是不同的格式。

问题
我需要将该userID传递给REST调用。那么我该如何隐藏或争夺它呢？

var app = angular.module('plunker', []); 
app.controller('main',['$scope', 'dataService', function($scope, dataService) {
  $scope.numbers = [];
  console.log(dataService);
  //is getNumbers a function?
  dataService.getNumbers(0, 20).then(function(numbers){
    $scope.numbers = numbers;
  });
}]);
app.factory('dataService', ['$q', function($q) {
  console.log('construct service');
  var dataService = this;
  
  // factory function body that constructs shinyNewServiceInstance
  var numbers = [];
  dataService.getNumbers = function(i, m){ 
    var s = i;
    var deferred = $q.defer();
    console.log('Data retrieval fired: ' + i + ' to ' + m);
    while(i < s + m){
      numbers.push(i++);
    }
        setTimeout(function(){
          console.log('Data retrieval complete');
          deferred.resolve(numbers);
      },100);
      
    
    console.log('Promise returned');
    return deferred.promise; 
  };
  
  return dataService;
}]);
<html>
  <head>        
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  </head>
  <body ng-app="plunker" ng-controller="main">
      <div>
        <ul>
          <li ng-repeat="n in numbers">Number: {{n}}</li>
        </ul>
      </div>
  </body>
</html>

创建将维护您正在编辑的当前选定用户的服务。

var app = angular.module('{you user module name}'); 
app.factory('userService', ['$q', function($q) {
  console.log('construct service');
  var userService= this;
  // factory function body that constructs shinyNewServiceInstance
  userService.selectedUser = null; //will set this when editing
  userService.setUser = function(userId){
     //let's assume that you can get the user based on id 
     selectedUser = getUser(userId); 
  };
  //Other properties and functions that make up your user service
  return userService;
}]);

其他地方：

userService.setUser($stateParams.userId); //we've set the user 
$location.url('/edituser'); //or however you want to change the current url
相关文章：