Question

经过身份验证后，应用程序将重定向到仪表板。该仪表板带有侧边栏，并且所有路由器链接都会更改地址栏中的路径名，但除非手动重新加载页面，否则不会渲染组件。

这是我的主要app.component.html代码：

<div *ngIf="isLogged" class="dashboard">
    <app-navbar></app-navbar>

    <div class="container-fluid">
        <div class="row navbar-expand-md">

            <app-sidebar></app-sidebar>

            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                    <h1 class="h2">Dashboard</h1>
                </div>

                <router-outlet></router-outlet>

            </main>
        </div>
    </div>
</div>

<div *ngIf="!isLogged" class="plain-page">
    <router-outlet></router-outlet>
</div>

这是app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthguardService } from './services/authguard.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{

  title = 'App';

  isLogged: boolean = false;
  constructor (
    private router: Router,
    private authguardService: AuthguardService
  ){}

  ngOnInit(){

    // this.isLogged = this.authguardService.canActivate();

    this.authguardService.authStatus.subscribe(
      (data: boolean) => {
        this.isLogged = data;
      }
    );
  }

}

现在这是我的router.module

import { NgModule } from '@angular/core';
import { RouterModule, Routes, CanActivate } from '@angular/router';
import { AuthguardService as Authguard } from './services/authguard.service';

import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { UsersComponent } from './pages/users/users.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { Google2FAComponent } from './pages/google2-fa/google2-fa.component';
import { RolesComponent } from './pages/roles/roles.component';
import { FileUploadComponent } from './pages/merchant/file-upload/file-upload.component';

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'signup',
    component: SignupComponent
  },
  { 
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'google2fa/:id',
    component: Google2FAComponent,
    canActivate: [Authguard]
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [Authguard]
  },
  {
    path: 'users',
    component: UsersComponent,
    canActivate: [Authguard]
  },
  {
    path: 'roles',
    component: RolesComponent,
    canActivate: [Authguard]
  },
  {
    path: 'file-upload',
    component: FileUploadComponent,
    canActivate: [Authguard]
  }

]

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})
  ],
  exports: [RouterModule]
})
export class RoutesModule { }

这是AuthguardService

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

import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthguardService implements CanActivate {

  private isLoggedIn = new BehaviorSubject<boolean>(this.tokenService.loggedIn());
  authStatus = this.isLoggedIn.asObservable()

  constructor(
    private router: Router,
    private tokenService: TokenService
  ) {}


  canActivate(): boolean {
    if (!this.tokenService.loggedIn()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }

  changeAuthStatus(value: boolean){

    this.isLoggedIn.next(value);

  }

}

为什么登录后没有渲染组件并需要手动重新加载才能渲染组件？

Answer 1

我认为这里的问题可能是由于Angular Component Lifecycle的缘故，suscribe从未解决，因为该组件一开始没有显示，请在构造函数中包括以下内容：

 export class AppComponent implements OnInit{

 title = 'App';

 isLogged: boolean = false;
 constructor (
   private router: Router,
private authguardService: AuthguardService
 ){
   this.authguardService.authStatus.subscribe(
     (data: boolean) => {
         this.isLogged = data;
        }
}

// remove the subscribe from the ngOnInit()

除非在Angular 6 +

1 个答案: