WFRoute

The WFRoute class in the xAtom Framework 🚀 empowers your web app with URL route-based logic execution. It's like having a GPS for your app's navigation! 🗺️

With WFRoute, you can:

• ✨ Create dynamic routes with ease.
• 🔗 Group routes for organized logic.
• 🏃 Run specific business logic based on the current route.
• 🔐 Make Webflow pages protected or public at the client level.
• 🧩 Utilize variables within your routes.
• 📝 Access and work with page parameters effortlessly.

Navigate through the power of URLs and let WFRoute simplify your app's routing logic! 💡

Getting Started

Initialization: To embark on your journey with the WFRoute class, you need to initialize it with a route string. Below is a step-by-step guide to kickstart your route management:

Pro Tip

It's considered best practice to house your route logic within the /src/routes directory.

Basic Routing

For a basic route, simply create an instance of WFRoute and specify the route path. Then, use the execute method to define the logic to be executed when the route is accessed.

Example

import { WFRoute } from "@xatom/core";
import { settingPage } from "../modules/setting";

// Define a simple route for sign-up page
new WFRoute("/sign-up").execute(() => {
  // Execute your logic for /sign-up
});

// Create routes with URL parameters, such as the invite page with a token parameter
// URL: /invite?token=XYZ
new WFRoute("/invite").execute((params: { token: string }) => {
  // Execute your logic for /invite
  console.log(params.token); // XYZ
});

// Group your routes using (.*) expressions to manage all routes under /dashboard
new WFRoute("/dashboard/(.*)").execute(() => {
  // Handle child routes

  // Create a route for the profile page
  new WFRoute("/dashboard/profile").execute(() => {
    // Define logic for your profile page
  });

  // Execute logic from an imported function for the /dashboard/settings route
  new WFRoute("/dashboard/settings").execute(settingPage);
});

// Utilize variable routes to apply a single business logic to all blog posts
// Example URL: /blogs/how-get-started
new WFRoute("/blogs/:post").execute(
  (params: { post: string }) => {
    // Execute logic for your post page
    console.log(params.post); // how-get-started
  }
);

Routes with Middleware

Enhance your route security effortlessly by protecting specific routes or groups of routes with middleware. Simply chain your routes using the withMiddleware method. This feature seamlessly integrates with the WFAuthMiddleware instance. Explore more about WFAuthMiddleware details here. Fortify your route security with ease! 💪🚀

Example

import { WFRoute } from "@xatom/core";
import { userMiddleware } from "../modules/auth/user";

// Define a WFRoute that allows only non-logged-in users to access the sign-up page
new WFRoute("/sign-up")
  .withMiddleware(userMiddleware, "GUEST", "allow", {
    onError: () => {
      // If the user's role is not guest, navigate to the dashboard
      window.location = "/dashboard";
    },
  })
  .execute(() => {
    // Execute your logic for /sign-up
  });

// Create a WFRoute that permits only logged-in users to access all pages falling under the dashboard
new WFRoute("/dashboard/(.*)")
  .withMiddleware(userMiddleware, "USER", "allow")
  .execute((params: { token: string }) => {
    // Handle child routes

    // Logic for the profile page
    new WFRoute("/dashboard/profile").execute(() => {
      // Define logic for your profile page
    });

    // Logic for the message page
    new WFRoute("/dashboard/messages").execute(() => {
      // Define logic for your message page
    });
  });

// Set up a WFRoute that restricts access to a route to only logged-in users
new WFRoute("/my-protected-page")
  .withMiddleware(userMiddleware, "USER", "allow", {
    onError: () => {
      // If the user's role is not user (not logged in), navigate to the unauthorized page
      window.location = "/not-allowed";
    },
  })
  .execute(() => {
    // Define logic for your protected page
  });

Syntax

new WFRoute(routePath:string);

Methods

The WFRoute class provides an extensive array of properties and methods to enhance the security of your web application:

execute(fn)

The execute method allows you to specify a callback function that is executed when a matching route is encountered. This callback function can also access route parameters.

Example

// Example 1: Basic route without parameters
new WFRoute("/my-page").execute(() => {
  // Define your page logic here
});

// Example 2: Route with a parameter (e.g., /my-page/123)
new WFRoute("/my-page/:id").execute((params: { id: string }) => {
  console.log(params.id); // Access route variables (e.g., 123)
});

// Example 3: Route with a query parameter (e.g., /my-page?id=123)
new WFRoute("/my-page").execute((params: { id: string }) => {
  console.log(params.id); // Access query parameters (e.g., 123)
});

Syntax

execute(fn: (params: {[key: string]: string}) => void): WFRoute

Parameters

Name	Type	Description
fn	function	A callback function

Callback Function Parameters

Name	Type	Description
paramse	{[key:string]:string}	Route parameter data

withMiddleware()

The withMiddleware method enables you to add middleware to your routes, providing enhanced security and control over route access.

Example

// Define a WFRoute that allows only non-logged-in users to access the sign-up page
new WFRoute("/sign-up")
  .withMiddleware(userMiddleware, "GUEST", "allow", {
    onError: () => {
      // If the user's role is not guest, navigate to the dashboard
      window.location = "/dashboard";
    },
  })
  .execute(() => {
    // Execute your logic for /sign-up
  });

Syntax

withMiddleware(
  middleware: WFAuthMiddleware,
  role: string,
  permission: "allow" | "disallow",
  config: { onError: () => void }
): WFRoute

Parameters

Name	Type	Description
middleware	WFAuthMiddleware	An instance of WFAuthMiddleware.
role	string	The role specified when initializing WFAuthMiddleware.
permission	"allow" or "disallow"	The middleware permission (allow or disallow).
config	{ onError: () => void }	Middleware configuration, including an onError function to handle errors.