Überprüfen Sie, ob der angemeldete Benutzer jede Seite ändern, im Winkel 2

Wenn Sie routing (und es scheint der Fall zu sein, da Sie sagen: "auf jeder Seite ändern"), können Sie nutzen mehrere Dinge:

• Erstellen Sie einen benutzerdefinierten router-Steckdose (eine sub-Klasse von RouterOutlet), überprüft die Authentifizierung mit seiner activate - Methode aufgerufen wird. In diesem Fall, können Sie etwas haben, global. Sowas:

  @Directive({
    selector: 'auth-outlet'
  })
  export class AuthOutlet extends RouterOutlet {
    (...)
  
    activate(oldInstruction: ComponentInstruction) {
      var url = this.parentRouter.lastNavigationAttempt;
      if (isAuthenticated()) {
        return super.activate(oldInstruction);
      } else {
        (...)
      }
    }
  }
  

  Sehen, diese Frage für mehr details:

  • Eckige 2-Authentifizierung mit Kind Strecken

• Nutzen Sie die CanActivate Dekorateur, um zu überprüfen, ist eine Komponente aktiviert werden kann oder nicht. In Ihrem Fall auszuführen, können Sie die Authentifizierung überprüfen auf dieser Ebene.

• Etwas könnte auch an der RouterLink Ebene ein - /ausblenden route links. In diesem Fall können Sie anwenden, Rollen Sie auf diesen Link, basierend auf der zugehörigen route-Konfiguration und den aktuellen Benutzer-Hinweise. Sehen Sie, diese Frage für mehr details:

  • Angular2. Wie zum ausblenden(nicht darstellen) den link in das Menü nach dem check Zugang?

Diese können auch gehandelt werden, innerhalb einer HTTP-interceptor (eine Klasse, die erweitert die Http eine). In diesem Fall, wenn eine Anfrage ausgeführt wird, können Sie einige plug-Authentifizierung prüft:

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    if (isAuthenticated()) {
      return super.request(url, options).catch(res => {
        //do something
      });        
    } else {
      //Redirect to login page
      //Or throw an exception: return Observable.throw(new Error(...));
    }
  }

  (...)
}

Sehen, diese Frage für mehr details:

• Wie erstellen Sie Abfangjäger in Angular2?

Zeige ich Ihnen eine einfache Umsetzung mit Angular2. Nutzen Sie @CanActivate Haken, wie gezeigt, Schlag zu überprüfen, ob der Benutzer loggedIn oder nicht mit isLoggedIn Funktion gibt Versprechen.

HINWEIS: unter Umsetzung ist zu prüfen, ob Benutzer ist loggedIn vor dem Zugriff auf eine beliebige Komponente oder nicht. Ich hoffe, dass durch einige änderungen kann man das erreichen, was Sie haben wollen.

Auth.ts

import {Observable} from 'rxjs/Observable';

export class Auth {
  constructor() {
    this.loggedIn = false;
  }

  login() {
    this.loggedIn = true;
  }

  logout() {
    this.loggedIn = false;
  }

  check() {
    return Observable.of(this.loggedIn);
  }
}

isLoggedIn.ts

import {Injector} from 'angular2/core';
import {appInjector} from './appInjector';
import {Auth} from './Auth';
import {Router, ComponentInstruction} from 'angular2/router';

export const isLoggedIn = (next: ComponentInstruction, previous: ComponentInstruction) => {
    let injector: Injector = appInjector(); //get the stored reference to the injector
    let auth: Auth = injector.get(Auth);
    let router: Router = injector.get(Router);

  //return a boolean or a promise that resolves a boolean
    return new Promise((resolve) => {
      auth.check()
          .subscribe((result) => {
                    if (result) {
                        resolve(true);
                    } else {
                        router.navigate(['/Login']);
                        resolve(false);
                    }
                });
  });
};

appInjector.ts

import {Injector} from 'angular2/core';

let appInjectorRef: Injector;
export const appInjector = (injector?: Injector):Injector => {
    if (injector) {
      appInjectorRef = injector;
    }

    return appInjectorRef;
};

somecomponent.ts

import {Component, View,ViewChild} from 'angular2/core';
import {CanActivate} from 'angular2/router';
import {isLoggedIn} from './isLoggedIn';

@Component({
  selector: 'some',
  template: 'some text'
})
@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => {
  return isLoggedIn(next, previous);  //this will tell whether user is loggedIn or not. 
})
export class Protected {
}

boot.ts

.
.
import { provide, ComponentRef } from 'angular2/core';
import { appInjector } from './app-injector';
.
.
bootstrap(AppComponent, [...]).then((appRef: ComponentRef) => {
  //store a reference to the application injector
  appInjector(appRef.injector);
});

Gibt es zwei Möglichkeiten, den Zugang zu beschränken Custom Router Outlet und CanActivate Decorator gezeigt und umgesetzt, die in diesem tollen Artikel Authentifizierung im Winkel 2