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 (thinkster.io/angularjs-jwt-auth) — Alon Eitan
– Alon Eitan, Commented Apr 11, 2016 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
– Max Sorin, Commented Apr 11, 2016 at 13:07
@MaxSorin I am kind of new to AngularJS. Can you please share a link or something that elaborates this? — theHeman
– theHeman, Commented Apr 11, 2016 at 13:09
Can't find a reason to hide the ID. ID's are not private "secret" data. — Ron Dadon
– Ron Dadon, Commented Apr 12, 2016 at 7:01

Max Sorin · Accepted Answer · 2016-04-11 16:18:05Z

1

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

edited Apr 11, 2016 at 16:18

answered Apr 11, 2016 at 13:30

Max Sorin

1,0526 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

theHeman Over a year ago

I am getting userService.setUser is not a function even after adding in dependencies.

Max Sorin Over a year ago

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 Over a year ago

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.

theHeman Over a year ago

I have made some necessary changes and successfully solved the issue thanks to your solution.

Collectives™ on Stack Overflow

How to hide selective data in URLs in AngularJS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related