ngx-permissions - NgxPermissionsGuard routing issue redirect to default route.

Current behavior

We have 3 child route and 1 root route

oneadmin/login
twoadmin/login
site/login
app route for root and lazy loading

I used to build angular 4 application with nodejs we have 2 admin panel, 1 site and app.module.ts we used for lazy loading, ngx-permissions, NgxPermissionsGuard.

After the user login from oneadmin they can access every route but if user is in dashboard user can't able to refresh page, if user refresh page it's redirect to http://127.0.0.1:3000.

http://127.0.0.1:3000/oneadmin/dashboard http://127.0.0.1:3000/oneadmin/profile

here is route code

const oneadminroutes: Routes = [ 
  {
    path: 'oneadmin', pathMatch: 'full', redirectTo: 'oneadmin/login',
  },
  {
    path: 'oneadmin/login', component: LoginComponent,
  },
  {
    path: 'oneadmin',
    component: OneAdminComponent,
    pathMatch: 'prefix',
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent,
        pathMatch: 'prefix',
        canActivate: [NgxPermissionsGuard],
        data: {
          permissions: { only: ['role1', 'role2', 'role3'] }
        }
      },
      {
        path: 'profile',
        component: UserProfileComponent,
        canActivate: [NgxPermissionsGuard],
        data: {
          permissions: { only: ['role1', 'role2', 'role3']  }
        }
      },
 ]
  }
];
export const OneadminRoutingModule: ModuleWithProviders = RouterModule.forChild(oneadminroutes);

Expected behavior

if user refresh the page it want redirect to to anywhere just stay them in to current page. http://127.0.0.1:3000/oneadmin/dashboard

Environment


Angular version :
Angular CLI: 1.6.1
Node: 8.9.1
OS: linux ia32
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.6.1
@angular/language-service: 4.4.6
@angular/tsc-wrapped: 4.4.6
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.6.2
webpack: 3.10.0

ngx-permissions version: ^3.0.0

Browser:
- [ ] Chromium (Ubuntu desktop) : version Version 62.0.3202.89 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (32-bit)
- [ ] Firefox version (Ubuntu desktop) : 57.0.1 (32-bit)

You can customize redirection with function and write your custom logic there

permissions: {
          only: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
              if (route.params['id'] === 42) {
                  return ['MANAGER', "UTILS"]
                } else {
                  return 'ADMIN'
                }
          }

I know this redirection method but wanted to stay on current page after page refresh.

After user is logged in then i set permission from get token which is work as expected but when user refresh any component after login then it's redirect to default route.

You need to save them forexample in local Storage and the load them before application starts. The problem is when you refresh the page all data is lost including permissions and the application need them back. so the best way is to save to localStorage and then load again.

I used localstorage to set the user object and get userobject but i assigned logged user role to ngx permission and then we used in route.

Just need 2 answers.

Do you have this permissions before applications starts?
You are loading user permissions before applications starts?

No i don't have this permission on starting on the app. assigning permission after user login

So the problem is. When user logins you assign permissions everything is good. But then you refresh and the whole data is lost including permissions. The user triest to access the page. Router checkes the permissions for him to view the page. There are no permissions there. User redirects to another page.

So You need to save permissions on login to localStorate. And before app starts load them to ngxPermissionsService again. https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/

AlexKhymenko / ngx-permissions