javascript - angular2 ruttvaktsvalideringar

Jag skapar en ny app med Angular och jag vill ställa in vissa valideringar på ruttvakter. Till exempel är min URL: localhost:4200/#/products och om jag vill navigera från menyn till en annan sida i min app localhost:4200/#/invoice vill jag inte att det ska vara möjligt att navigera bara genom att manuellt ändra URL:en och skriva invoice istället för products, men endast vid menyval.

så det här är min vakt:

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;
        }
      }

och detta är routerningstjänsten:

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å hur kan jag lägga till vissa valideringar där jag begränsar URL-ändringen och tillåter användaren att navigera till andra sidor endast från navigeringsmenyn när de klickar.

Svar #1

Du kan helt enkelt lagra någon flagga vid menyval. exempel:

lyssna efter klickhändelse på din menylänk och gör sedan följande:

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

och sedan i din 'AlwaysAuthGuard' kolla om 'menu-clicked' finns i localstorage eller inte. exempel:

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