Navigation Routes Configuration

In your Full-Stack Kit, navigation is based on the Next.js file routing system. However, we use the /app/routes.config.ts file to define the available routes and their access rules.

This configuration not only determines the available pages, but also controls access based on user roles. Additionally, the navbar logic utilizes this configuration to dynamically display routes depending on the user's role and authentication status.

Understanding the Navigation Routes Object

The navigationRoutes object is an array containing route configurations. Each route configuration has the following properties:

• name: The display name of the route.
• path: The URL path for the route.
• protected: Indicates whether the route is protected (accessible only when authenticated).
• roles: Specifies the roles that are allowed to access the route.

Example:

export const navigationRoutes: NavigationRoute[] = [
  {
    name: "Dashboard",
    path: "/dashboard",
    protected: true,
    roles: [Role.USER],
  },
  // ... other route configurations
];

Role-Based Access

Roles play a crucial role in determining who can access specific routes. In the example above, the Dashboard, Account, and Billing routes are protected and accessible to users with the Role.USER role.

The other are only accessible to users with the Role.ADMIN role.

In the database, the user's role is stored as an array of strings, so a user can have multiple roles. This allows for fine-grained access control.

A normal user has only the Role.USER role, while an admin user has both Role.USER and Role.ADMIN roles. So an admin user can access all the routes, while a normal user can only access the routes with the Role.USER role.

Nested Routes

The configuration also supports nested routes, as seen in the Admin route object. The Admin route is protected and only accessible to users with the Role.ADMIN role. It contains nested routes, such as "/admin/users" and "/admin/banners", each only accessible to users with the Role.ADMIN role.

{
  name: "Admin",
  path: "/admin",
  protected: true,
  roles: [Role.ADMIN],
  children: [
    {
      name: "Users",
      path: "/admin/users",
      protected: true,
      roles: [Role.ADMIN],
    },
    // ... other nested routes
  ],
}

Dynamic Navbar

The navigation routes configuration is used by the navbar logic to dynamically render navigation links based on the user's role. This ensures that users see only the routes they have permission to access. Customize the navigationRoutes array to fit the structure of your application and define access rules for different user roles.

Happy navigating!