Angular 分离登录和应用程序组件

当angular应用程序加载时，它应该显示登录组件，然后在成功登录时导航到应用程序组件

代码如下：

应用程序模块.ts

bootstrap: [LoginComponent]

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: AddUserComponent, canActivate: [AuthGuard] }
}

应用程序路由.module.ts

bootstrap: [LoginComponent]

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: AddUserComponent, canActivate: [AuthGuard] }
}

AuthGuard

export class AuthGuard implements CanActivate {

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

  canActivate(route, state: RouterStateSnapshot)
  {
    this.authService.isLoggedIn.subscribe(data => {

      if (data) 
        this.router.navigate(['/home'])


        this.router.navigate(['/login'], { queryParams:{ returnUrl: state.url }})


      return false;
    });

    return true;
  }
}

AuthService

export class AuthService {

  constructor(private httpClient: HttpClient) { }

  private _loggedIn = new BehaviorSubject<boolean>(false);

  isLoggedIn = this._loggedIn.asObservable()

  login() : Observable<boolean>
  {
     this._loggedIn.next(true);

     return this.isLoggedIn
  }
}

导出类身份验证服务{
构造函数（私有httpClient:httpClient）{}
private _loggedIn=新行为主体（false）；
isLoggedIn=这个。_loggedIn.asObservable（）
login（）：可观察
{
此._loggedIn.next（真）；
返回这个.isLoggedIn
}
}

但是在登录之后，它不会导航到主组件，并且它总是停留在登录组件中，登录页面会再次加载吗

Stackblitz链接：

---

app.module.ts应该是您的

AuthGuard

中的另一个吗？不，这不起作用，我想我还遗漏了其他东西。您可以提供一个相同的工作stackblitz吗？我在打开stackblitz

时遇到此错误错误错误：选择器“app root”与任何元素都不匹配

  login():any{

    console.log("login")

    this.authService.login(true)
   this.router.navigate(['/home']);
  }

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


@Injectable()
export class AuthGuard implements CanActivate {

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

  canActivate(route, state: RouterStateSnapshot)
  {
    this.authService.isLoggedIn.subscribe(data => {

      console.log('sssss::' + data);

      if (data) 
      {
     return true;
      }
     else{
        this.router.navigate(['/login'], { queryParams:{ returnUrl: state.url }})
       return false;
}
    });


    return true;
  }
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of as observableOf, BehaviorSubject  } from 'rxjs';

@Injectable()
export class AuthService {

  constructor(private httpClient: HttpClient) { }

  // private _loggedIn = new BehaviorSubject<boolean>(false);
  // isLoggedIn = this._loggedIn.asObservable()
 public isLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);

  login(value: boolean) 
  {
  this.isLoggedIn.next(value);

  }

  register() {

  }

  logout (){
    this.isLoggedIn.next(false);
  }


}