javascript - angular2 rutevakter valideringer

Jeg lager en ny app med Angular og jeg ønsker å sette opp noen valideringer på rutevakter. For eksempel er min URL: localhost:4200/#/products og hvis jeg vil navigere fra menyen til en annen side i appen min localhost:4200/#/invoice vil jeg ikke at det skal være mulig å navigere bare ved å manuelt endre URL-en og skrive invoice i stedet for products, men bare ved menyklikk.

så dette er vakten min:

import { Injectable } from '@angular/core' ;
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router';

@Injectable()
export class AlwaysAuthGuard implements CanActivate {
        canActivate() {
          console.log('AlwaysAuthGuard');
          return true;
        }
      }

og dette er rutingtjenesten:

const appRoutes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: AppLoginComponent, data: { title: 'Login' }},
  { path: 'invoice', component: InvoiceComponent, canActivate: [AlwaysAuthGuard], data: { title: 'Invoice' }},
  { path: 'products', component: ProductsComponent, data: { title: 'Products' }},
  { path: 'logout', component: LogoutComponent, data: { title: 'Logout' }},
  { path: '**', component: NotFoundComponent, data: { title: 'Page Not Found' }}
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash : true });

Så hvordan kan jeg legge til noen valideringer som begrenser URL-endring og lar brukeren navigere til andre sider bare fra navigasjonsmenyen når de klikker.

Svar #1

Du kan enkelt lagre et flagg ved menyklikk. For eksempel:

lytt etter klikkhendelse på menylinken din og gjør deretter følgende:

localstorage.setItem('menu-clicked', 'true');

og deretter i din 'AlwaysAuthGuard' sjekk om 'menu-clicked' er tilgjengelig i localstorage eller ikke. eksempel:

canActivate() {
   // console.log('AlwaysAuthGuard');
   if(localstorage.getItem('menu-clicked') == 'true'){
      localstorage.removeItem('menu-clicked');
      return true;
   }
   return false;
}