Winkel 5 canActivate Umleitung zu login über browser aktualisieren

Winkel-5-Authentifizierung-app mit angularfire2 und FB.
Die app funktioniert gut, die Navigation mittels in-app-links z.B. Umleitung zum dashboard nach dem login oder den link zu einer anderen Seite (Komponente), über eine Schaltfläche/link in der app.
Jedoch, wenn auf die "http://localhost:4300/dashboard" Seite traf ich die Aktualisierung des Browsers (Chrome), leitet es mich wieder zurück auf die Login-Seite.
Mit ZURÜCK /WEITER auf der browser funktioniert gut - aber ich denke, weil ich bin nicht speziell gefragt, um eine bestimmte route.

Ich habe eine NavBar, die durch die Verwendung von Abonnement -, identifiziert, ob ich angemeldet bin oder nicht (siehe screenshot rechts oben...) - und das alles Prima funktioniert.

Winkel 5 canActivate Umleitung zu login über browser aktualisieren

Ich vermute, dass auf Aktualisierung des Browsers oder die direkte URL-navigation, die es versucht, die Seite zu laden, bevor die Identifizierung, ob ich mich bereits authentifiziert wurde oder nicht.
Die dev-Konsole schlägt vor, dass diese von der Konsole.log-Aussagen, die ich eingefügt in die nav-bar-Komponente und der Tatsache, dass Sie "undefiniert" vor der Eckigen Kern schlägt vor, dass wir im dev-Modus:

Winkel 5 canActivate Umleitung zu login über browser aktualisieren

app.Routen:

import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './views/login/login.component';
import { DashboardComponent } from './views/dashboard/dashboard.component';
import { ProfileComponent } from './views/profile/profile.component';

import { AuthGuard } from './services/auth-guard.service';

const appRoutes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    canActivate: [AuthGuard],
    component: DashboardComponent
  },
  {
    path: 'profile',
    canActivate: [AuthGuard],
    component: ProfileComponent
  },
  {
    path: '**',
    redirectTo: ''
  }
];

export const AppRoutes = RouterModule.forRoot(appRoutes);

auth-gaurd:

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

@Injectable()
export class AuthGuard implements CanActivate {
  status: string;

  constructor(private router: Router,
              private authService: AuthService) { }

  canActivate() {
    this.authService.authState.subscribe(state =>
      this.status = state.toString());

    console.log('Can Activate ' + this.authService.authState);
    console.log('Can Activate ' + this.authService.isLoggedIn());
    console.log('Can Activate ' + this.status);

    if(this.authService.isLoggedIn()) {
      return true;
    }

    this.router.navigate(['/']);
    return false;
  }
}

auth.service:

import { Injectable } from '@angular/core';
import { Router } from "@angular/router";

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { GoogleAuthProvider, GoogleAuthProvider_Instance } from '@firebase/auth-types';
import { userInfo } from 'os';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class AuthService {
  private user: Observable<firebase.User>;
  private userDetails: firebase.User = null;

  public authState = new Subject();

  constructor(private _firebaseAuth: AngularFireAuth, private router: Router) { 
    this.user = _firebaseAuth.authState;

    this.user.subscribe((user) => {
      if (user) {
        this.userDetails = user;
        this.authState.next('Logged In');
        //console.log(this.userDetails);
      } else {
        this.userDetails = null;
        this.authState.next('Not Logged In');
      }
    });
  }

  isLoggedIn() {
    if (this.userDetails == null) {
      return false;
    } else {
      return true;
    }
  }
}

nav-bar.Komponente:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent implements OnInit {
  status: string;

  constructor(private authService: AuthService) {
    console.log('Constructor ' + this.status);
  }

  ngOnInit() {
    //this.authService.isLoggedIn().subscribe((state) => this.status = state.toString());
    this.authService.authState.subscribe(state =>
      this.status = state.toString());
    console.log('ngOnInit ' + this.status);
  }
}
  • Ich habe ein bisschen schummeln, damit es funktioniert, aber würde es begrüßen, eine elegantere Lösung für mein problem.
  • In jedem app.route habe ich noch eine Daten: {userUrl:} - element zu identifizieren, auf welchem Weg der Benutzer versuchte, zu bekommen und in der auth.service hat ein public var zum speichern der directUrl und dann setzen Sie diese var in der auth-guard service in canActivate. In auth.service Konstruktor, in dem 'if (Benutzer)' konstruieren, prüfen Sie, ob die var gesetzt ist und wechseln, wenn es einen Wert hat (nach dem zurücksetzen zu verhindern, Endlosschleife!).
InformationsquelleAutor Woody | 2018-02-28
Schreibe einen Kommentar