In the Luxuria template, all role configuration are located in the assets/data directory. This documentation provides a detailed overview of the users.json file structure, which is used to define user roles and their associated permissions.

1. users.json

The users.json file contains an array of user objects, each representing a unique user profile. Below is a breakdown of the JSON structure:

                         	
{
    "id": 3,
    "username": "customer",
    "password": "customer",
    "name": "customer",
    "email": "customer@gmail.com",
    "role": [
        {
        "name": "CUSTOMER",
        "priority": 3
        }
    ],
    "permissions": ["canAdd", "canEdit", "canRead"],
    "avatar": "./assets/images/avatars/customer.jpg",
    "refresh_token": true
}
							
						

User Object Properties

Options	Description
id	A unique identifier for the user. Each user must have a distinct ID.
username	The username that the user will use to log in to the system.
password	The user's password. Ensure to use secure practices for storing and managing passwords.
name	The full name of the user, which may be displayed in the user interface.
email	The email address associated with the user. This can be used for notifications and password recovery.
role	An array of role objects that define the user’s role(s) in the system. Each role object contains: name: The name of the role (e.g., CUSTOMER, ADMIN). priority: A priority value that can be used to determine role hierarchy or access levels.
permissions	A list of permissions granted to the user. Common permissions include: canAdd: Permission to add new records. canEdit: Permission to edit existing records. canRead: Permission to read/view records.
avatar	A path to the user's avatar image. This image will be displayed in the user interface.
refresh_token	A flag indicating whether a refresh token is enabled for the user. This is used in authentication processes to maintain user sessions.

2. menu.json

The sidebar menu in the Luxuria template is configured using a JSON structure that defines the properties and permissions for each menu entry. This documentation provides an overview of how to add new entries for pages in the sidebar menu.

                         	
{
    "route": "cust_dashboard",
    "name": "cust_dashboard",
    "type": "link",
    "icon": "airplay",
    "permissions": {
        "only": [
            "CUSTOMER"
        ],
    }
}
							
						

Sidebar Menu Entry Structure

Each entry in the sidebar menu is represented as a JSON object. Below is a breakdown of the properties used in a typical sidebar menu entry:

Properties

Options	Description
route	The route name that corresponds to the page. This is used for navigation within the application.
name	The display name of the menu item. This is what users will see in the sidebar.
type	Indicates the type of menu item. Common types include "link" for navigation links.
icon	The icon associated with the menu item. This is typically a string representing the icon's name, which will be displayed alongside the menu item.
permissions	An object that defines the permissions required to view the menu item. This includes: only: An array of roles that are allowed to access this menu item. If the user’s role matches any of the roles listed, the menu item will be displayed. except : A role or array of roles that are explicitly denied access to this menu item. If the user’s role matches any of the roles listed in this field, the menu item will not be displayed.

Explanation of Example Entry

Options	Description
route	"cust_dashboard" - This is the route name for the customer dashboard page.
name	"cust_dashboard" - This is the display name that will appear in the sidebar.
type	"link" - This indicates that this menu item is a navigational link.
icon	"airplay" - This specifies the icon that will be shown next to the menu item.
permissions	An object that defines the permissions for this menu item: only: ["CUSTOMER"] - This restricts visibility of the menu item to users with the "CUSTOMER" role only. except: "GUEST" - This specifies that users with the "GUEST" role will not have access to this menu item.

Adding New Pages to the Sidebar Menu

To add a new page to the sidebar menu, create a new JSON object with the required properties as shown in the example above. Ensure that the route, name, type, icon, and permissions are properly defined to reflect the new page and its accessibility.

3. app.routes.ts

In the Luxuria template, the routing configuration for the application is defined in the app.routes.ts file. This documentation provides an overview of how to configure routes, including authentication and access control for specific roles.

                                    
{
    path: 'cust_dashboard',
    canActivate: [AuthGuard],
    loadChildren: () =>
        import('../modules/customer/dashboard/dashboard.routes').then(
        (m) => m.DASHBOARD_ROUTE
        ),
    data: {
        role: ['ADMIN', 'CUSTOMER'],
    },
},
                                   
                               

Route Configuration Structure

Each route in Angular is defined as an object that includes various properties to control navigation and access. Below is a breakdown of the properties used in a typical route configuration.

Properties

Options	Description
path	The URL path associated with the route. This is the path that users will navigate to in the application.
canActivate	An array of guards that control whether a route can be activated. This is typically used for authentication and authorization checks.
loadChildren	A function that dynamically loads a module when the route is activated. This is useful for lazy loading features to improve application performance.
data	An object that can hold additional metadata for the route. This can include roles or other parameters that are relevant for access control.

Explanation of Example Route

Options	Description
path	'cust_dashboard' - This defines the URL path for the customer dashboard. Users will navigate to this path to access the dashboard.
canActivate	[AuthGuard] - This specifies that the AuthGuard service will be used to determine if the user can activate this route. This ensures that only authenticated users can access the dashboard.
loadChildren	This function dynamically imports the DASHBOARD_ROUTE from the dashboard.routes module located in the customer directory. This allows for lazy loading of the dashboard module when the route is activated.
data	An object that holds additional metadata for the route: role: ['ADMIN', 'CUSTOMER'] - This array specifies the roles that are allowed to access the cust_dashboard route. Only users with the "ADMIN" or "CUSTOMER" roles will be able to access this route.

Adding New Routes

To add a new route, create a new object following the structure outlined above. Ensure that the path, canActivate, loadChildren, and data properties are correctly defined to match the new functionality and access requirements.

4. auth.service.ts

In the Luxuria template, the auth.service.ts file is responsible for managing user authentication and redirecting users to their respective dashboard pages based on their roles. This documentation provides an overview of how the redirect logic is implemented after a user logs in.

                                    
for (const role of this.tokenService.roleArray ?? []) {
    if (role['name'] == 'ADMIN') {
        this.router.navigate(['dashboard/dashboard1']);
        break;
    } else if (role['name'] == 'EMPLOYEE') {
        this.router.navigateByUrl('emp_dashboard/dashboard1');
        break;
    }else if (role['name'] == 'CUSTOMER') {
        this.router.navigateByUrl('cust_dashboard/dashboard1');
        break;
    }
}
                                   
                               

Breakdown of the Code

Options	Description
Loop Through Roles	The code iterates over the roleArray obtained from the tokenService. This array contains the roles associated with the logged-in user. The ?? [] operator ensures that if roleArray is null or undefined, it defaults to an empty array, preventing runtime errors.
Role Checks	ADMIN: If the user's role is "ADMIN", the router navigates to the admin dashboard using this.router.navigate(['dashboard/dashboard1']);. EMPLOYEE: If the user's role is "EMPLOYEE", the router navigates to the employee dashboard using this.router.navigateByUrl('emp_dashboard/dashboard1');. CUSTOMER: If the user's role is "CUSTOMER", the router navigates to the customer dashboard using this.router.navigateByUrl('cust_dashboard/dashboard1');.
Break Statement	The break statement is used to exit the loop after a successful navigation. This prevents further checks once a matching role has been found.