Angular 4 Router: How to not display parameters in the url bar?

Question

When I use:

  constructor(router: Router) {
    router.navigate(['page2', 123456789]);
  }

I see example.com/page2/123456789 in the address bar. Is it possible to hide it? I don't want someone to be able to enter example.com/page2 so that he/she navigates to this special page. It should only work internally with the command router.navigate(['xy', 'parameter']);

I know about useHash: true. Is there maybe another attribute that can solve my problem? — hardfork
– hardfork, Commented Sep 23, 2017 at 8:22
It's not clear what you're asking for, or maybe I'm confused, can you please clarify what do you want to use URL as a flag to store data? Do you want to be able to programmatically change the route? — Mohammad Kermani
– Mohammad Kermani, Commented Sep 23, 2017 at 8:58
sorry, my English is not the best. I want to navigate ONLY with router.navigate() (not with a href). I want to display my visitor the X-page at first. If he clicks a button on the x-page, he should see the Y-page. But he should not be able to see /x-page or /y-page in the url bar and he should not be able to visit the y-page via something like xy.com/y-page. He should only see the y page if he presses the button on the x-page. — hardfork
– hardfork, Commented Sep 23, 2017 at 9:02
Your English is good. So, as far as I understood is that you don't want users to be able to navigate to routes directly by entering the URL into the browser URL bar. But when the user is visiting page xy.com/y-page, he must see the URL. There is not any way to hide URL. But you can limit users from direct accessing a page by maybe something like counting URL access — Mohammad Kermani
– Mohammad Kermani, Commented Sep 23, 2017 at 9:05
Yes. That's what I tried to do. So I need to "save" that someone clicked on the button and if anyone visits the y-page, I need to check wheather this person did also click the button. If the person clicked the button, I display the y-page. If the person did not click the button before, I use router.navigate() to navigate the person back to the x-page to click the button... Right? — hardfork
– hardfork, Commented Sep 23, 2017 at 9:12

priya_21 · Accepted Answer · 2019-03-05 09:15:39Z

The param hiding with dynamic data during routing was possible with state routing in angularJS or angularjs 1.x but Angular 2+ routing doesn't allow.

The only solution would be to use service else read below.

param are not meant to be hidden but data property is. So instead of using SkipLocationChange: true one should use data property. Note data property cannot be used for dynamic content. It will be more of static data.

SkipLocationChange: true Navigates without pushing a new state into history. This mean if you are navigating from /page1 to /page2 then url will still show /page1 after navigation. This is not what author is expecting. here the expectation is to show /page2 in url but without param visible in url.

The solution is to use data property in route config for example

 path: 'product', component: ProductComponent , data: [{isProd: true}]}

then you can get the value of the data as show below

 route.snapshot.data[0]['isProd'];

Vega · Accepted Answer · 2017-09-23 12:10:51Z

5

You can skip the full url display by setting skipLocationChange member true on the router:

this.router.navigate(['/view'], { skipLocationChange: true });

Docs

answered Sep 23, 2017 at 12:10

Vega

28.8k28 gold badges121 silver badges151 bronze badges

3 Comments

Jun Over a year ago

Then, the url will remain the same.

hzitoun Over a year ago

when the user hits refresh, it will show the old view.

hzitoun Over a year ago

you are on the /view1, you navigate to /view2. When skipLocationChange is true the url wont change (you see the details of view2 and the url is view1), now when users refreshes the page, it will reload view1 instead reloading view2

Deeksha Bilochi · Accepted Answer · 2018-12-22 05:58:37Z

3

use the skipLocationChange property could be used to protect a user from seeing URL change.

this.router.navigate(['/url'], { queryParams:  youParam , skipLocationChange: true});

answered Dec 22, 2018 at 5:58

Deeksha Bilochi

941 silver badge8 bronze badges

2 Comments

priya_21 Over a year ago

can i use the same for redirecting to external url ? for example I am in xyz.com I want to redirect abc.com . Any suggestions please

Ayush Chaurasia Over a year ago

I think your answer is similar to what is given by @Vega and as hzitoun mentioned in the comment it will reload the old view on hitting refresh, won't it?. Can you please help with a solution which is better than this.

Emre SOLUĞAN · Accepted Answer · 2019-04-03 08:19:54Z

1

You can't hide the parameter in the url. But you can use SessionStoreage for alternative. You can create parameter in SessionStorage and can read in every part of your project until when you close the browser or if you kill the parameter value from SessionStorage.

answered Apr 3, 2019 at 8:19

Emre SOLUĞAN

2032 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular 4 Router: How to not display parameters in the url bar?

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Linked

Related