Question

我想要一个登录页面，默认情况下，人们不会被导航到该页面。如果他们成功登录，它们将被重定向到主应用程序。正常的处理方法是什么？您是否有多个.html文件和多个根组件，或者通常如何实现？我希望能够在根之间注入服务等。例如，我从登录根目录获得了ADAL服务，我需要能够访问主应用程序根目录。另外，在路由部分，您还需要多个路由器吗？

Answer 1

借助router-outlet指令，可以配置将借助URL加载的各种组件。您可以在根路由器模块中配置路由器配置。

const login_routes: Routes = [
  { path: 'login', canActivate: [LoginGuard], component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'logout', component: LogoutComponent }
];

当用户访问/ login时，它将调用loginGuard来验证用户是否登录。如果没有重定向到ADAL URL，或者重定向到主页。

如果您有延迟加载的模块，需要按需加载。您可以配置路由器

const login_routes: Routes = [
  { path: 'login', canActivate: [LoginGuard], component: LoginComponent },
  { path: 'home', loadChildren: 'app/src/home.module#HomeModule' }
];

Answer 2

供参考：-How to use angular 6 Route Auth Guards for all routes Root and Child Routes?

1) 
ng generate guard auth   [ Create guard, the file name would be like auth.guard.ts ]

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
'@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import {Router} from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService,
    private myRoute: Router){
  }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(this.auth.isLoggednIn()){
      return true;
    }else{
      this.myRoute.navigate(["login"]);
      return false;
    }
  }
}


2)  ng g c login  [Create login page ]
ng g c nav  [Create nav page ]
ng g c home  [Create home page ]
ng g c registration  [Create registration page ]


3)  App.module.ts file add below contents

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule,Router,Routes } from '@angular/router';
import { ReactiveFormsModule,FormsModule } from '@angular/forms';
import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { NavComponent } from './nav/nav.component';
import { HomeComponent } from './home/home.component';
import { RegistrationComponent } from './registration/registration.component';

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: 
[AuthGuard]},
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NavComponent,
    HomeComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,ReactiveFormsModule,FormsModule,
    RouterModule.forRoot(
      myRoots,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [AuthService,AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }


4) Add link in nav.component.html

<p color="primary">
  <button  routerLink="/home">Home</button>
  <button  *ngIf="!auth.isLoggednIn()" routerLink="/register">Register</button>
  <button  *ngIf="!auth.isLoggednIn()" routerLink="/login">Login</button>
  <button  *ngIf="auth.isLoggednIn()" (click)="auth.logout()">Logout</button>
</p>


4.1)  Add in nav.component.ts file

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
  constructor(public auth: AuthService) { }
  ngOnInit() {
  }
}


5) 
ng g service auth  [Create service page Add below code in authservice.ts]

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
@Injectable()
export class AuthService {
  constructor(private myRoute: Router) { }
  sendToken(token: string) {
    localStorage.setItem("LoggedInUser", token)
  }
  getToken() {
    return localStorage.getItem("LoggedInUser")
  }
  isLoggednIn() {
    return this.getToken() !== null;
  }
  logout() {
    localStorage.removeItem("LoggedInUser");
    this.myRoute.navigate(["Login"]);
  }
}


6) add content in login.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  form;
  constructor(private fb: FormBuilder,
    private myRoute: Router,
    private auth: AuthService) {
    this.form = fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }
  ngOnInit() {
  }
  login() {
    if (this.form.valid) {
      this.auth.sendToken(this.form.value.email)
      this.myRoute.navigate(["home"]);
    }
  }
}


6.1)  add in logincomponent.html page

<form [formGroup]="form" (ngSubmit)="login()">
<div>
<input  type="email" placeholder="Email" formControlName="email" />
</div>
<div>
<input  type="password" placeholder="Password" formControlName="password" />
</div>
<button type="submit" color="primary">Login</button>
</form>

7) Add below code in app.component.html

<app-nav></app-nav>
<router-outlet></router-outlet>

Answer 3

基本上，您需要实现路由防护，以控制用户直接访问您的其他路由页面。您可以按照this教程来保护您的应用程序。

实现Angular的 Route Guards 所建议的针对Angular应用程序的方法

具有用于登录组件的多个root应用程序

3 个答案: