AuthGuard CanActivate navigate to the previous url the user was in - Angular 2

[Simon Azzopardi]

Hi guys,

hope you're fine.

I have a dilemma how I can navigate users back to the previous url where they was after they were redirected to the login page.

Currently, I have this AuthGuard service:

import { Injectable }             from '@angular/core';
import { CanActivate,
         Router,
         ActivatedRouteSnapshot,
         RouterStateSnapshot }    from '@angular/router';
import { AuthService }            from './auth.service';


import {Observable} from 'rxjs/Observable';




@Injectable()
export class AuthGuard {


    constructor(private _authService: AuthService, private _router: Router) {}


    canActivate(): Observable<boolean>{
        return this._authService.checkIfUserIsLoggedIn()
        .map((result) => {
               
 if (result["_body"] == "true") {
                   
 return true;
 } else {
 this._router.navigate(['/login'], { queryParams: {message: 'You must be logged in to access Dashboard!'}});
 return false;
 }
 });  
    }
}

Then, I assigned it accordingly to my dashboard routes:

export const DashboardRoutes: RouterConfig = [
    {
        path: '',
        redirectTo: '/dashboard',
        terminal:true
    },
  {
    path: '/dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    children:[
        {path: '', component: DashboardHomeComponent, canActivate: [AuthGuard]},
        {path: '/jobs', component: JobsComponent, canActivate: [AuthGuard]}
    ]
  },
];

Now I would like to know how I can get the previous url ater they were redirected to the login, to login first.

Any ideas please?

thank you in advance.

Kind Regards

[Simon Azzopardi]

Any idea guys please?

[Lucas Lacroix]

Use the location object: http://www.w3schools.com/jsref/obj_location.asp

Then, when you redirect to the login, pass the current URL as an encoded parameter to the login URL.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

[Simon Azzopardi]

HI Lucas,

thank you for your reply.

Do you have an example how I can use the location object to get the current url?

Thank you

[Lucas Lacroix]

I sent you the documentation already.

[Simon Azzopardi]

Hi Lucas,

I want the component name so that I can pass it as queryParams to the login component and then once log in, user will be taken to the component as in the query params, using the router navigate.

Any idea how I can achieve this please?

[Lucas Lacroix]

Hi Simon,

This has nothing to do with Angular2 and is basic Javascript programming. I would suggest that you take a look at some Javascript tutorials if you need help in that arena. If you need help specifically with Angular2, this is the forum for you.

That being said...

this._route.navigate(['/login'], {

    from: location.toString(),

    ....

});

Then, follow the tutorial here (https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters) to get the parameter back in to your login component.

[Simon Azzopardi]

Hi Lucas,

Thanks for that.

I was already there but how can i tell router to navigate with the full url: localhost:1245/dashboard/clients ?

Thanks kinds Regards

[Lucas Lacroix]

Open your browser debugging tools and play around with the location object. Between that and the documentation I already sent you, you should be able to figure it out.

[Simon Azzopardi]

Hi Lucas,

I am referring to the Login Component.

Once I get the params, from the from parameter for example and it will be: localhost/dashboard/clients

How I can tell the this._router to navigate to that url?

[Lucas Lacroix]

onLogin() {

    this._route.params.subscribe(params => {

        let originalUrl = params['from'];

        this._router.navigate([originalUrl]);

    });

}

You may need to adjust originalUrl to match the base of your application.

[Simon Azzopardi]

Hi Lucas,

I have already tried that but it is not redirecting there.

 this._router.navigate([originalUrl]);

originalUrl = http://localhost/dashboard/clients for example

[Lucas Lacroix]

Like I said already: you will need to adjust the URL to match your application.

[Simon Azzopardi]

Hi Lucas,

You mean I need to crop the url to get the last part of the url, example clients?

[Lucas Lacroix]

Yes.