isAuthenticated值未更新，并且路由未发生

Question

我的authGuard在未通过用户身份验证并路由到登录页面时可以正常工作，但是当我单击登录按钮时，用户存储在我的[[localStorage中，并且所有数据已更新但不会发生路由到具有authGuard

的任何组件

authService

import { Injectable, Output, EventEmitter } from '@angular/core';
import { UsersService } from './users.service';

import { AngularFirestore } from '@angular/fire/firestore';
import { Router } from '@angular/router';
import { BehaviorSubject, Subject, Observable } from 'rxjs';
import { map } from 'rxjs/internal/operators/map';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private currentUserSubject = new BehaviorSubject<any>(this.decodeUser());
  public currentUser = this.currentUserSubject.asObservable();

  private isAuthanticatedSubject = new BehaviorSubject<any>(this.hasLoggedInUser());
  public isAuthanticated = this.isAuthanticatedSubject.asObservable();
  constructor(
    private router: Router,
    private db: AngularFirestore
  ) {}

  logoutBtn
  login(username,password){
    return this.db.collection('users', ref=> ref.where(`username`, '==', username).where('password', '==', password))
    .snapshotChanges().pipe(map(res => {
      const user = res.map((u:any) => ({
        id: u.payload.doc.id,
        fullname: u.payload.doc.data().fullname,
        role: u.payload.doc.data().role
        //...u.payload.doc.data()
      }))
      if(!user[0])  return false;


      console.log(user[0])
      localStorage.setItem('currentUser' , JSON.stringify(user[0]))
      this.currentUserSubject.next(user[0])
      this.router.navigate(['/admin/admin'])
      return true;
    }))
  }
  private decodeUser(){
    const user = localStorage.getItem('currentUser')
    return user? JSON.parse(user) :  {}
  }
  private hasLoggedInUser(){
    return !!localStorage.getItem('currentUser')
  }
  logout(){
    localStorage.removeItem('currentUser')
    this.isAuthanticatedSubject.next(false)
    this.currentUserSubject.next({})
    this.router.navigate(['/home'])
  }
}

authGuard.service

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

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

  constructor(
    private auth: AuthService,
    private router: Router
  ) { }
  canActivate(){
    this.auth.isAuthanticated.subscribe(res => console.log(res))

    return this.auth.isAuthanticated.pipe(map(isAuth => {
      if(!isAuth){
        this.router.navigate(['/admin/login']);
        return false
      }
      if(isAuth){
        return true;
      }
      console.log(isAuth)
    }))

  }

}

admin-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from '../home/components/home/home.component';
import { UsersComponent } from './components/users/users.component';
import { AuthGuard } from '../services/auth-guard.service';


const routes: Routes = [

  {
    path:'',
    component: LoginComponent
  },
  {
    path:'login',
    component: LoginComponent
  },
  {
    path:'admin',
    component: AdminComponent,
    canActivate: [AuthGuard]
  },
  {
    path:'users',
    component: UsersComponent,
    canActivate: [AuthGuard]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

admin.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';
import { SharedModule } from '../shared/shared.module';
import { LoginComponent } from './components/login/login.component';
import { BookingListComponent } from './components/booking-list/booking-list.component';
import { BookingGridComponent } from './components/booking-grid/booking-grid.component';
import { MalakComponent } from '../home/components/malak/malak.component';
import { HomeModule } from '../home/home.module';
import { RepeatDayComponent } from './components/repeat-day/repeat-day.component';
import { UsersComponent } from './components/users/users.component';
import { RoleService } from '../services/role.service';
import { AuthGuard } from '../services/auth-guard.service';


@NgModule({
  declarations: [AdminComponent, LoginComponent, BookingListComponent, BookingGridComponent, RepeatDayComponent, UsersComponent,],
  imports: [
    CommonModule,
    AdminRoutingModule,
    SharedModule,
    HomeModule
  ],
  providers: [RoleService, AuthGuard],
  exports: [RepeatDayComponent],
  entryComponents: [RepeatDayComponent]

})
export class AdminModule { }

login.component

import { Component, OnInit, Input, EventEmitter, Output, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { UsersService } from 'src/app/services/users.service';
import { AuthService } from 'src/app/services/auth.service';
import { async } from '@angular/core/testing';
import { take, map } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
import { RoleService } from 'src/app/services/role.service';
import { AdminComponent } from '../../admin.component';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
  constructor(
    private router: Router,
    private rs: RoleService,
    private auth: AuthService
  ) { }

  admin = true
  loginError: boolean = false
  user
  ngOnInit() {


  }
  userLog;
  submit(f) {
    this.auth.login(f.username, f.password).subscribe(res => {
      console.log(res)
      if (res) {
        this.router.navigate(['/admin/admin'])
      }
    })
  }
}

Answer 1

在login的AuthService功能中，您已成功将用户存储在本地存储中，但是忘记更新isAuthanticatedSubject的值。您可以通过this.isAuthanticatedSubject.next(true)执行此操作。

希望这会有所帮助