0

我正在将 AuthGuard 与 firebase 一起使用，并且在限制对选定路由的访问方面一切正常，除了 routerLinks 本身即使在经过身份验证后也会通过点击“禁用”。但是当我直接通过 URL 访问它们时，我可以访问这些路由。谁能帮我这个？

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'
import { AuthService } from '../services/auth.service'
import { AngularFireAuth } from 'angularfire2/auth'
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class AuthGuard implements CanActivate {

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

  canActivate(): Observable<boolean> {
    return this.afAuth.authState.pipe(map(auth => {
      if(!auth) {
        this.router.navigate(['/login']);
        return false;
      } else {
        return true;
      }
    }));
  }
}

应用程序路由.module.ts

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

// Components
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { AddClientComponent } from './components/add-client/add-client.component';
import { EditClientComponent } from './components/edit-client/edit-client.component';
import { ClientDetailsComponent } from './components/client-details/client-details.component';
import { SettingsComponent } from './components/settings/settings.component';
import { NotFoundComponent } from './components/not-found/not-found.component';

import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  {path: '', component: DashboardComponent, canActivate:[AuthGuard]},
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: 'client/add', component: AddClientComponent, canActivate:[AuthGuard]},
  {path: 'client/edit/:id', component: EditClientComponent, canActivate:[AuthGuard]},
  {path: 'client/:id', component: ClientDetailsComponent, canActivate:[AuthGuard]},
  {path: 'settings', component: SettingsComponent, canActivate:[AuthGuard]},
  {path: '**', component: NotFoundComponent},
];

@NgModule({
  declarations: [],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
export class AppRoutingModule { }

登录组件.ts

  onSubmit() {
    this.authService.login(this.email, this.password)
      .then(res => {
        this.flashMessage.show('You are now logged in', {
          cssClass: 'alert-success text-center', timeout: 4000
        });
        this.router.navigate(['/']);
      })
      .catch(err => {
        this.flashMessage.show(err.message, {
          cssClass: 'alert-danger text-center', timeout: 4000
        });
      })
  }

另请注意，this.router.navigate(['/']);有时不起作用，这真的很奇怪，让我认为这是某种错误。

这是示例 routerLinks 的 navbar.component.html

      <ul class="navbar-nav ml-auto">
        <li *ngIf="!isLoggedIn" class="nav-item">
          <a routerLink="/register" class="nav-link">Register</a>
        </li>
        <li *ngIf="!isLoggedIn" class="nav-item">
          <a routerLink="/login/" class="nav-link">Login</a>
        </li>
        <li *ngIf="isLoggedIn" class="nav-item">
          <a href="#" class="nav-link">{{ loggedInUser }}</a>
        </li>
        <li *ngIf="isLoggedIn" class="nav-item">
          <a routerLink="/settings" class="nav-link">Settings</a>
        </li>
        <li *ngIf="isLoggedIn" class="nav-item">
          <a href="#" (click)="onLogoutClick()" class="nav-link">Logout</a>
        </li>
      </ul>

单击时的路由器事件 在此处输入图像描述 在此处输入图像描述

4

0 回答 0