How to hide selective data in URLs in AngularJS

Question

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?

As long as the user is only editing their own details, you can set the details through the **Authorization** header (https://thinkster.io/angularjs-jwt-auth) — Alon Eitan, Apr 11 '16 at 13:06
`userService.selectedUser` Don't put things in the URL that don't have to be there. You can have a route that sets `userService.selectedUser` and then redirects away to the `http://localhost:8080/#/editUser` url — Max Sorin, Apr 11 '16 at 13:07
@MaxSorin I am kind of new to AngularJS. Can you please share a link or something that elaborates this? — theHeman, Apr 11 '16 at 13:09
Can't find a reason to hide the ID. ID's are not private "secret" data. — Ron Dadon, Apr 12 '16 at 07:01

Max Sorin · Accepted Answer · 2016-04-11T16:18:05.350

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

I am getting `userService.setUser is not a function` even after adding in dependencies. — theHeman, Apr 11 '16 at 13:54
I don't know what the rest of your code looks like, but as written above it most certainly is a function. Are you injecting it into your controller? `app.controller('myController',['$scope', 'userService', function($scope, userService) {...}]);` — Max Sorin, Apr 11 '16 at 14:14
Without having your app, I'm not sure what is going wrong where, I've added snipped to show how the service method is exposed to and used by the controller. — Max Sorin, Apr 11 '16 at 16:23
I have made some necessary changes and successfully solved the issue thanks to your solution. — theHeman, Apr 12 '16 at 06:38

How to hide selective data in URLs in AngularJS

1 Answers1