CODEWITHSUNDEEP
angular
hello123
hello123

Reputation: 951

Angular2 redirectTo causing URL params to be lost before canActivate called

I've got a canActivate Guard which checks the URL for a jwt token and saves it as a cookie (then subsequently will check for the cookie). If there is no token then the page is re-directed to another application which allows the user to log in and creates the jwt.

When I navigate back I get a URL like:

http://localhost:3000/?jwt=...

The AppModule does the following:

RouterModule.forRoot([{path: "**", redirectTo: "/import", pathMatch: "full"}], {useHash: true})

Then in ImportModule:

RouterModule.forChild([
            { path: "import", component: ImportComponent, canActivate: [ImportGuard] }
        ])

The problem is that I can see the URL change from localhost:3000/?jwt=... to localhost:3000/#/import and the param is lost, so when I check for it it doesn't exist.

I'm very new to Angular2 and am almost certainly doing something wrong, but am struggling to find any examples of how to get params from an external URL.

I'm unable to change the external service to return the URL /#/import?jwt=... and don't feel like I should need to as the current implementation has been made to work with ReactJS, so I feel like it should be possible with Angular.

Any suggestions appreciated? If you need more information then please let me know.

Thanks

Upvotes: 1

Views: 1521

Answers (3)

hello123
hello123

Reputation: 951

I've fixed this by doing the following

RouterModule.forRoot([{path: "**", component: AppComponent, pathMatch: "full"}], {useHash: true})

Then in AppComponent I've used document.URL to get the URL and get the param directly from the string. I don't like this solution though as it's a bit hacky and would much rather use the Route/Router.

Upvotes: 1

Haddar Macdasi
Haddar Macdasi

Reputation: 3555

I stumbled into same problem, how to keep url params and redirect with route configuration.
To bypass this unsupported action this can help:

export const routes: Routes = [
  {
    path: '',
    component: RedirectComponent,
    pathMatch: 'full'
  }
 }, [... your other routes config]
 ];

and RedirectComponent has on init :

this.router.navigate(['/import'], {relativeTo: this.route , preserveQueryParams : true});

Upvotes: 1

Vignesh
Vignesh

Reputation: 2386

Why can't you able to use child routing under imports. For Example 

  RouterModule.forChild([
     { path: "import", component: ImportComponent, canActivate:[ImportGuard],
     Children:[
             { path: "/:jwt", component: ImportComponent, canActivate: [ImportGuard]}] }
            ])

Upvotes: 1

Related Questions