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!