typescript - Finns det ett sätt att blockera vägar i Angular?

Jag är ganska ny på Angular och webbutveckling i allmänhet och jag försöker skapa ett guide-liknande formulär, inklusive 5 steg. Jag har ställt in routing för de 5 stegen och mitt mål är att förhindra att användaren hoppar till ett annat steg via URL:en. Han bör bara använda de två knapparna "nästa" och "tillbaka" som jag tillhandahåller och navigeringen ska enbart ske via dessa knappar. Jag vet att det också finns sätt att göra detta utan routing, men jag tänkte att det var en bra övning att arbeta med rutter.

Det här är mina rutter:

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/1', pathMatch: 'full' },
    { path: '1', component: FormContainer1Component },
    { path: '2', component: FormContainer2Component },
    { path: '3', component: FormContainer3Component },
    { path: '4', component: FormContainer4Component },
    { path: '5', component: FormContainer5Component }
];

Svar #1

För att förhindra att en användare får tillgång till en komponent genom routing kan du använda guards. Guards är som tjänster som returnerar ett sant eller falskt värde baserat på ett villkor, om villkoret uppfylls kan användaren få tillgång till komponenten.

Detta är vakten i routern :

{
  path: 'cart',
  component : CartComponent,
  canActivate : [AuthGuard, NoAdminGuard]
}

Detta är själva vakten :

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from '../service/auth.service';
@Injectable({
  providedIn: 'root' 
})
export class AuthGuard implements CanActivate {


  constructor( private _authService : AuthService,
      private _router : Router){}

  canActivate () : boolean{
    if(this._authService.loggedIn()){
      console.log(localStorage.getItem('token'))
      return true
    } else{
      this._router.navigate(['/login'])
      return false
    }
  }  
}

Du kan skapa en väktare med:

ng generate guard <name>

Svar #2

Du kan använda UrlHandlingStrategy

i din app.module kan du importera

import { UrlHandlingStrategy, UrlTree} from '@angular/router';

och

     export class CustomUrlHandlingStrategy implements UrlHandlingStrategy {
          shouldProcessUrl(url: UrlTree) {
          ....
          // your code
          }

           extract(url: UrlTree) {
             return url;
          }
          merge(url: UrlTree, whole: UrlTree) { return url; }

Byt då din

 @NgModule({
    declarations: [ ...],
...
    providers: [...
       { provide: UrlHandlingStrategy, useClass: CustomUrlHandlingStrategy }
    ]
});