ashhem ashhem - 2 months ago 9
Javascript Question

How to hide selective data in URLs in AngularJS

I am writing code for a SPA in AngularJs. I am using

ui-router
instead of
ngRoute
in this for routing and controlling navigation. In my application there is a situation where I am passing the userId through the url for editing information of that specific user.

My routing for the specific case looks like:

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


My related markup is:

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


A part of my Controller:

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


My URL now appears like:

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


Problem:

In this or such URLs, I don't want the user to see my userID. I either want it to be shown as something else or I want it completely hidden. I have gone though the question AngularJS: How to clear query parameters in the URL? here on Stackoverflow but that does not help me as my URL is in a different format.

Question

I need to pass that userID to a REST call. So how do I hide it or scramble it?

Answer

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>

Create service that will maintain the currently selected user that you're editing.

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

Elsewhere:

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