RouteGuard

[artem-galas]

Hi,

is there a possibility to do a redirect to sign-in before a user hasn't signed in?
And also to forbid a user to get to sign-in/sign-up pages, if he has already logged in?

[artem-galas]

I have decided to issue this way:

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { Angular2TokenService } from 'angular2-token';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private _tokenService: Angular2TokenService,
    private router: Router) {}

  isLoggedIn(): boolean {
    return !!this._tokenService._currentAuthData;
  }

  canActivate() {
    if (this.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/sign-up']);
      return false;
    }
  }
}

[saplaum]

Can you give some explanations how you put this into your app (which files)?

[artem-galas]

I create authGuard/authGuard.ts file in shared directory, I use Angular2Seed.
Then I add this line on Route file canActivate: [AuthGuard].

Route File example:

import {AuthGuard} from '../shared/authGuard/authGuard';

export const DashboardRoutes: Route[] = [
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: '',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  }
];

[neroniaky]

Angular2Token implements the CanActivate Interface so you can use it like: canActivate: [Angular2Token]. But as far as I understand you want an automatic redirection, which would be an good thing to add to the service.
To forbid a user to navigate to the sign-in/up page while he is logged in, you need the CanDeactivate interface which can not be implemented into the service. I think for this case a isLoggedIn() method would be helpful.
Let me know what you think 😃 .

EDIT: I did not see that you suggested adding the redirection to the CanActivate Methode in #8 already. I think your suggestion makes a lot of sense. Mind creating a PR?

[artem-galas]

Thanks for the PR but the problem with the first load still persists.
I’ve taken a video so it is clear to you what I mean.
Video

As you can see I am logged in as admin user and upon page refresh I get the signup form, although I was on the Settings page before. I think it’s better to use isLoggedIn method that I described above.

[neroniaky]

Hey @artem-galas, thanks for your explanation. I think the problem is that the CanActivate uses currentUserData, which gets set after the .validateToken() request has been answered by the backend. This seems to be to late for CanActivate.
Makes more sense to use currentAuthData like you suggested, because it gets read from local storage and is available right away.

[jasonswett]

@artem-galas's code doesn't work for me. The TypeScript compiler doesn't like it when I try to access private property this._tokenService._currentAuthData.

Also, I don't think I can depend on the token already having been validated at the time the code is first run. Therefore I'm using this._tokenService.validateToken().

The following code almost works.

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { Angular2TokenService } from 'angular2-token';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/catch';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private _tokenService: Angular2TokenService,
    private router: Router) {}

  canActivate():Observable<boolean>|boolean {
    return this._tokenService.validateToken().map(res => {
      return res.json().success;
    });
  }
}

It works fine when the user is logged in. The only problem is that when the user is not logged in, I get this:

error_handler.js:51 Error: Uncaught (in promise): Response with status: 401 Unauthorized for URL: http://localhost:4200/api/auth/validate_token

If and when I get past that, I'll try to post an update here.

[neroniaky]

@jasonswett you have two options to solve this:

• use Angular2Token as Route Guard directly, like:

const routerConfig: Routes = [
    { 
        path: '', 
        component: PublicComponent 
    }, {
        path: 'restricted', 
        component: RestrictedComponent, 
        canActivate: [Angular2TokenService] 
    }
]

• use the userSignedIn(): boolean- method (not published via NPM-Package yet).

[jasonswett]

@neroniaky Yeah, unfortunately I couldn't get the latest Angular2-Token code to work on my machine. I want a redirect, anyway.

The following code does work in both the authenticated and unauthenticated cases, although I have a hunch it's not 100% "correct".

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { Angular2TokenService } from 'angular2-token';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private _tokenService: Angular2TokenService,
    private router: Router) {}

  canActivate():Observable<boolean>|boolean {
    return Observable.create(observer => {
      this._tokenService.validateToken().subscribe(res => observer.complete(), err => {
        this.router.navigate(['/sign-in']);
        observer.next(false);
      });
    });
  }
}

[neroniaky]

@jasonswett I just published version 0.1.16 via NPM which includes the latest changes.