Wie kann ich einen Benutzer umleiten, wenn sie mit nicht authentifiziert sind Router

Question

In Angular 2 Wie kann ich einen Benutzer umleiten, wenn sie nicht authentifiziert verwenden Router Version 2.0.0-rc.1

Ich bin auf der Suche zu tun dies in meiner app.component, wo meine Routen gespeichert sind.

Ich möchte erkennen, ob der Benutzer authentifiziert wird, bevor es eine Seitenkomponente trifft. So kann ich sie dann zum Login umleiten.

Ich habe versucht canActivate die nicht scheint, um für meine Router-Version zu arbeiten.

Ich bin auf der Suche nach einer Lösung für diese Version des Routers: "@ Winkel/Router": "2.0.0-rc.1"

ODER

Eine Lösung für die neuesten Version des Routers. Wenn einer bereitgestellt wird, können Sie mir zeigen, wie ich meine Router-Version mit git bash mit dieser Lösung aktualisieren kann.

Dies ist meine aktuellen Code:

export class AppComponent implements CanActivate { 
    authService: AuthService; 
    userService: UserService; 

    constructor(_authService: AuthService, _userService: UserService, private location: Location, private router: Router) { 
     this.authService = _authService; 
     this.userService = _userService; 
    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable <boolean> | boolean { 

     //This doesnt get hit 
     console.log("here"); 

     return true; 
    } 
} 

Answer 1

Verwenden Sie ein Interceptor:

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {provide} from '@angular/core'; 
import {HTTP_PROVIDERS, Http, Request, RequestOptionsArgs, Response, XHRBackend, RequestOptions, ConnectionBackend, Headers} from '@angular/http'; 
import {ROUTER_PROVIDERS, Router} from '@angular/router'; 
import {LocationStrategy, HashLocationStrategy} from '@angular/common'; 
import { Observable } from 'rxjs/Observable'; 
import * as _ from 'lodash' 

import {MyApp} from './app/my-app'; 

class HttpInterceptor extends Http { 

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router) { 
     super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.request(url, options)); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.get(url,options)); 
    } 

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.post(url, body, this.getRequestOptionArgs(options))); 
    } 

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.put(url, body, this.getRequestOptionArgs(options))); 
    } 

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.delete(url, options)); 
    } 

    getRequestOptionArgs(options?: RequestOptionsArgs) : RequestOptionsArgs { 
     if (options == null) { 
      options = new RequestOptions(); 
     } 
     if (options.headers == null) { 
      options.headers = new Headers(); 
     } 
     options.headers.append('Content-Type', 'application/json'); 
     return options; 
    } 

    intercept(observable: Observable<Response>): Observable<Response> { 
     return observable.catch((err, source) => { 
      if (err.status == 401 && !_.endsWith(err.url, 'api/auth/login')) { 
       this._router.navigate(['/login']); 
       return Observable.empty(); 
      } else { 
       return Observable.throw(err); 
      } 
     }); 

    } 
} 

bootstrap(MyApp, [ 
    HTTP_PROVIDERS, 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, { useClass: HashLocationStrategy }), 
    provide(Http, { 
     useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) => new HttpInterceptor(xhrBackend, requestOptions, router), 
     deps: [XHRBackend, RequestOptions, Router] 
    }) 
]) 
.catch(err => console.error(err));