Discover how to modify the URL in Angular

Question

Discover how to modify the URL in Angular

There are two distinct projects under consideration.

Authentication Project: is hosted at http://localhost:4200. This project contains a login page where users can input their credentials to sign in.

Upon successful login, the user will be redirected to another project called Application.

Application Project: is hosted at http://localhost:8000

If the user has logged in successfully, they will arrive at the dashboard located at http://localhost:8000/dashboard within this application project.

So far, everything seems to be functioning correctly.

In the event that a user attempts to access http://localhost:8000/dashboard directly, I want them to be redirected to http://localhost:4200 for signing in.

Since access to this project http://localhost:8000/dashboard is restricted without signing in. Auth guard measures have been implemented and are working properly.

What I require is if a user inputs the URL as http://localhost:8000/users (note the URL contains users) directly, then they should be directed to the sign-in page. Upon successful sign-in, they should be redirected to the same URL from which they initially accessed.

Therefore, the scenario involves a user manually entering the URL as http://localhost:8000/users, being met with the sign-in page due to not being logged in, and upon successful sign-in, being redirected to http://localhost:8000/. However, I need to redirect them to http://localhost:8000/users instead, as that was their original location.

How can I retrieve the URL from which the user came?

My applications are built using Angular 7.

javascript angular typescript angular6 angular-services

Answer 1

Answer №1

To set the origin URL as a GET parameter for the redirect from localhost:8000/users to localhost:4200, you can do something like localhost:4200?url=%2Fusers

When on the login page, check if the parameter is set. If it is, redirect to localhost:8000/users; otherwise, redirect to default localhost:8000/dashboard.

This serves as an example of how to perform a redirect.

let currentUrl;
// get current url, e.g. currentUrl = "/users"
// or currentUrl = window.location.pathname
window.location.href = "http://localhost:4200?url=" + encodeURIComponent(currentUrl);

Don't forget to use decodeURIComponent to decode the URL.

You can access query parameters using:

Angular

this.activatedRoute.queryParams.subscribe(params => {
    const url = decodeURIComponent(params['url']);
    console.log(url);
});

VanillaJs

let urlParam = window.location.search.substr(1).split("&").map(function(el) {return el.split("=");}).find(function(el) {return el[0] === "url";})
let url = urlParam ? decodeURIComponent(urlParam[1]) : "";

VanillaJs

URLSearchParams
VanillaJs

Url.searchParams

Answer 2

To set the origin URL as a GET parameter for the redirect from localhost:8000/users to localhost:4200, you can do something like localhost:4200?url=%2Fusers

When on the login page, check if the parameter is set. If it is, redirect to localhost:8000/users; otherwise, redirect to default localhost:8000/dashboard.

This serves as an example of how to perform a redirect.

let currentUrl;
// get current url, e.g. currentUrl = "/users"
// or currentUrl = window.location.pathname
window.location.href = "http://localhost:4200?url=" + encodeURIComponent(currentUrl);

Don't forget to use decodeURIComponent to decode the URL.

You can access query parameters using:

Angular

this.activatedRoute.queryParams.subscribe(params => {
    const url = decodeURIComponent(params['url']);
    console.log(url);
});

VanillaJs

let urlParam = window.location.search.substr(1).split("&").map(function(el) {return el.split("=");}).find(function(el) {return el[0] === "url";})
let url = urlParam ? decodeURIComponent(urlParam[1]) : "";

VanillaJs

URLSearchParams
VanillaJs

Url.searchParams

Answer 3

Answer №2

Within your Authentication Guard, you have the option to store the previous URL visited by the user. If the user is not logged in, they will be redirected to the login page. After successful login, the system will check if there was a previously set redirect URL in the service. If one exists, the user will be redirected to that page; otherwise, they will be directed to the default page.

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): boolean {
    const url: string = state.url;
    if (this.loginService.isUserLoggedIn()) {
        return true;
    }
    this.loginService.setRedirectUrl(url);
    this.loginService.redirectToLogin();
    return false;
}

In the loginService.ts file:

setRedirectUrl(url: string): void {
    localStorage.setItem('state', url);
}

After logging in, the system will verify if there is a stored state key in the local storage. If found, the user will be redirected to that URL; otherwise, they will be sent to the default page. We hope this explanation aids in understanding the process.

Answer 4

Within your Authentication Guard, you have the option to store the previous URL visited by the user. If the user is not logged in, they will be redirected to the login page. After successful login, the system will check if there was a previously set redirect URL in the service. If one exists, the user will be redirected to that page; otherwise, they will be directed to the default page.

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): boolean {
    const url: string = state.url;
    if (this.loginService.isUserLoggedIn()) {
        return true;
    }
    this.loginService.setRedirectUrl(url);
    this.loginService.redirectToLogin();
    return false;
}

In the loginService.ts file:

setRedirectUrl(url: string): void {
    localStorage.setItem('state', url);
}

After logging in, the system will verify if there is a stored state key in the local storage. If found, the user will be redirected to that URL; otherwise, they will be sent to the default page. We hope this explanation aids in understanding the process.

Answer 5

Answer №3

If you're looking to streamline your Angular application, consider implementing a redirect service with a boolean flag and designated redirect URL. Upon user inputting an URL, initialize the flag in the ngOnInit method then use the router module to capture the URL. When navigating to the login page, check the flag status and trigger redirection post-login.

Answer 6

If you're looking to streamline your Angular application, consider implementing a redirect service with a boolean flag and designated redirect URL. Upon user inputting an URL, initialize the flag in the ngOnInit method then use the router module to capture the URL. When navigating to the login page, check the flag status and trigger redirection post-login.

Answer 7

Answer №4

Here's a glimpse of our process:

Starting with the AuthGuard

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

if (this.isAuthorized) {
  return true;
}

// If not logged in, redirect to login page with return url
console.log("Redirecting to login page with return url: "+ state.url);
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
  }

Subsequently, during the login process, we guide them back to the returnUrl

Answer 8

Here's a glimpse of our process:

Starting with the AuthGuard

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

if (this.isAuthorized) {
  return true;
}

// If not logged in, redirect to login page with return url
console.log("Redirecting to login page with return url: "+ state.url);
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
  }

Subsequently, during the login process, we guide them back to the returnUrl

Discover how to modify the URL in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Jquery: Pressing Enter will cause the input field to lose

What could be causing my application to hang on my local server?

The element 'mat-form-field' is unrecognized in Angular 9 and Material 9.2.0 version

What is preventing this JSON object from being parsed correctly?

Tips for implementing a filtering function within an array of objects

Tips for crafting effective error messages to communicate with users

Update the multidimensional array function to ES6 syntax

When redirecting to the same component, Vue.js hooks are not triggered

Unable to resize images in Firefox

Leveraging spread syntax and styling for array string interpolation in JavaScript

Acquire feedback from PHP using SweetAlert notifications

Having trouble getting the if statement to run with JavaScript Closures?

What could be causing the directives module to not get properly incorporated into the Angular app module?

Creating artistic designs on an item with Three.js

A step-by-step guide on initializing and setting a cookie value with expiration

How can I incorporate shared Angular 2 components in my Angular 2 web application with the help of webpack?

Can an XSS attack occur on a style tag with inline styling?

Tips for styling dates in an Angular Material table

Conceal multiple divs at the same time based on their largest dimension

If I remove my project but still have it saved on my GitHub, do I need to reinstall all the dependencies or can I simply run npm install again?