What is the role of returnUrl in Angular

user_13892487 0
Viewed 734

Can anyone explain me this code:

this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });

What does this code do. What is returnUrl? I searched Angular docs but couldn't find more about it where is it narrated.

Edit Added after getting this much help and based on my understanding:: ReturnUrl is a programmer defined queryparem ReturnUrl is used to make a user navigate to the url he was trying to access after login. For example at first the user might be trying to navigate to dashboard but he will not be allowed as it is auth guarded. but on login the returnUrl query parames is used to help the user navigate back to the dashboard.

angular
2 Answers

returnUrl is not documented in the Angular documentation, since it's defined as a queryParam. It can just be anything you pass in there.

It will then be part of the URL like:

foo://example.com:8042/over/there?returnUrl=login
\_/   \______________/\_________/ \_____________/ 
 |           |            |            |
scheme    authority      path        query

In your case: it will be used as a reference where to direct the user to when the person is (not) able to login. state.url is most likely a string and queryParams are handled as strings, so adding returnUrl=true will result in a stringified true: 'true'.

Another example:

// Navigate to /results?page=1
this.router.navigate(['/results'], { queryParams: { page: 1 } });

Here it will only show the results of the first page. See Angular documentation about queryParams inside UrlCreationOptions.

user_60222430

Most probably the Component that loads on /login after Login has been successful might need it to redirect the user to the url that is specified in returnUrl.

A redirectUrl is generally used on Login Screens as a redirection route after successful login.

So consider this:

Your app has a lot of different screens that load as a result of navigation to a lot of different routes. Some of these routes could be protected and might need the user to sign-in before they can access these routes.

So some logic(generally in a Route Guard) might check if the user is logged in or not, when trying to navigate to these routes. And when the user is not logged in, they might navigate the user to the /login route that loads up a LoginComponent. At this point, you might need to be aware of the route that the user was trying to navigate to. And you can let the LoginComponent know about it, by passing it as a queryParam.

user_26222920
Related