Search params not preserved on page refresh when using permission.ui module

85 Views Asked by At

I'm using angular 1.5.8, angular-ui-router 0.2.18 & 5.1.0 version of anglar-permission library. I have enabled the HTML5 mode in the app.

Everything was working fine in my app until today when I starting making use of $location.search() method.

My module is including dependencies as:

angular.app('app', [
    ...
   'ui.router',
   'permission', 'permission.ui', 
   ...
]);

I have a simple user listing page with various filters. I'm changing the app so that whenever filter changes, I set it on the URL (so that the user can share the URL with applied filters). For example, $location.search({query: 'john', sort: 'email'}). This is working fine and the URL is getting changed from http://localhost:9000/user/list to http://localhost:9000/user/list?query=john&sort=email when any filter is applied.

But when I'm refreshing the page or opening the URL with the query string in a new tab, the query params are getting removed and URL is being changed back to http://localhost:9000/user/list. I have been searching the cause for this issue for the whole day and went through various GitHub issues of Angular, ui-router and other SO posts but nothing helped me.

Then I started trial & error and removed this library module completely and things started working fine. I researched more and found out that it's actually the permission.ui module that is causing this problem so if I just remove the permission.ui module from the app, that query string persists on refreshing the page.

I don't understand how the permission.ui module is making that issue and what is the fix for that.

Update 1

Here is my state configuration (not really sure if this matters in my issue):

var adminPermissions = {
    only: 'ROLE_ADMIN',
    redirectTo: 'dashboard'
};

$stateProvider
    .state('loggedIn', {
        abstract: true,
        templateUrl: 'views/layouts/logged-in.html'
    })
    .state('user', {
        parent: 'loggedIn',
        abstract: true,
        url: '/user',
        data: {permissions: adminPermissions},
        template: '<ui-view/>'
    })
    .state('user.list', {
        url: '/list',
        templateUrl: 'views/user/list.html'
    });

GitHub issue #401

0

There are 0 best solutions below