I am building an Angular application. In this application, I used Auth Guard to secure the application. I added the Auth guard in the following way.
{ path:'order', component: OrderComponent, canActivate: [AuthGuard]}
When I click on Order If the user is not authenticated he should route to the login page. After the user enters his credentials user should redirect to the 'order' page.
Here is my Auth Guard implementation.
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService:AuthService, private router: Router, state: RouterStateSnapshot){};
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
let isLoggedIn = this.authService.isAuthenticated();
if (isLoggedIn){
return true
} else {
this.router.navigate(['/login']);
return false;
}
}
}
And here is my Auth Service implementation.
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthService {
redirectUrl: string;
isLoggedIn = false;
constructor(private router: Router) { }
isAuthenticated(){
this.redirectUrl = this.router.url;
return this.isLoggedIn;
}
}
And here is my login AUthentication implementation.
const headers= new HttpHeaders({authorization: 'Basic ' +window.btoa(this.loginData.email+":"+this.loginData.password)});
this.httpClient.get("http://localhost:8181/authorize/", {headers, responseType : 'text' as 'json'})
.subscribe(
(response) => {console.log(response);
this.router.navigate([this.authService.redirectUrl || '/order']);},
(error) => console.log(error));
}
Still, I was unable to properly implement my requirement.
Requirement - When I click on the Order button If the user is not authenticated he should route to the login page. After the user enters his credentials user should redirect to the 'order' page.
You can save original URL requested by the user in returnUrl
Auth Guard
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
Then use the returnUrl to navigate after login success
Auth Service
const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
this.router.navigateByUrl(returnUrl);