Routing Structure

Main Routes

The application uses Angular Router with the following main routes:

// Home & Product Routes
{ path: "", component: HomePageComponent }
{ path: "search", component: SearchResultComponent }
{ path: "product", component: ProductDetailsComponent }
{ path: "category", component: CategoryProductComponent }

// Authentication Routes
{ path: "login", component: LoginComponent }
{ path: "signup", component: SignupComponent }
{ path: "signup/otp", component: VerifyPhoneOtpComponent }
{ path: "reset", component: ResetComponent }

// Shopping Routes (Protected)
{ path: "cart", canActivate: [AuthGuard], component: CartComponent }
{ path: "checkout", canActivate: [AuthGuard], component: CheckoutComponent }
{ path: "checkout-finish", canActivate: [AuthGuard], component: CheckoutConfirmationComponent }

// User Profile Routes (Protected)
{
  path: "user",
  canActivate: [AuthGuard],
  component: ProfileComponent,
  children: [
    { path: "profile/detail-profile", component: DetailProfileComponent },
    { path: "profile/address", component: AddressComponent },
    { path: "order", component: OrderComponent },
    { path: "change-password", component: ChangePasswordsComponent },
    { path: "chats", component: ChatComponent },
    { path: "favorite", component: FavoriteComponent },
    { path: "voucher", component: VoucherListComponent },
    { path: "voucher/history", component: VoucherHistoryComponent }
  ]
}

// Store Routes
{
  path: "store",
  component: PersonalStoreComponent,
  children: [
    { path: "store-profile", component: StoreProfileComponent },
    { path: "store-review", component: ReviewComponent },
    { path: "store-product", component: ProductComponent }
  ]
}

// Affiliate Routes (Protected)
{
  path: "affiliate",
  canActivate: [AuthGuard],
  component: AffiliateComponent,
  children: [
    { path: "register", component: RegisterComponent },
    {
      path: "",
      component: DashboardComponent,
      children: [
        { path: "dashboard", component: HomeComponent },
        { path: "commision", component: AffiliateWithdrawComponent },
        { path: "collection", component: CollectionComponent },
        { path: "payment-setting", component: PaymentSettingComponent }
      ]
    }
  ]
}

// Additional Routes
{ path: "about-us", component: AboutUsComponent }
{ path: "help", component: HelpComponent }
{ path: "faq", component: FaqTwoComponent }
{ path: "contact", component: ContactPageComponent }

// 404 Route
{ path: "**", redirectTo: "/not-found" }
{ path: "/not-found", component: PageNotFoundComponent }

Route Guards

AuthGuard (auth.guard.ts) protects routes that require authentication:

• Checks for JWT token in localStorage
• Verifies token with API
• Redirects to home page if not authenticated