Question:
I have a members area and I have three types of people who will be logging into it: Regular members, Team Managers and Super Admin.
I want to EITHER have different menu for each of these members so that they can access different pages OR I want to have a button that is only visible to Team Managers and Super Admin that will enable them to manage teams (the regular members wouldn’t see that button).
Product:
Wix Studio
What are you trying to achieve:
I didn’t know how to change the menu based on the user’s role, but I did think I could add a section and then add code to show or hide (or expand/collapse maybe better in retrospect) that section. The section would have a button on it to direct the user to manage teams. It would only be visible to Team Managers and Super Admins.
What have you already tried:
I asked ChatGPT for some help and I have generated some code… but there is a problem with it and I cannot work it out. The part that is flagging an issue (red squiggle underline) is “role._id”. The red squiggle underline is beneath “_id”
It also flags the same issue if I replace that with “role.id”
This line of code:
const hasRole = roles.some(role => role._id === targetRoleId); // or role.id if it's different
Here is the rest of the code:
import wixUsers from ‘wix-users’;
$w.onReady(function () {
// Check if the user is logged in
if (wixUsers.currentUser.loggedIn) {
// Get the current user’s roles
wixUsers.currentUser.getRoles()
.then((roles) => {
console.log("Roles response: ", roles); // Check the structure of the response
// Check if roles are returned correctly
if (roles && Array.isArray(roles)) {
// Log each individual role for detailed inspection
roles.forEach(role => console.log(role));
// Replace with the correct role ID based on what you see in the logs
const targetRoleId = "2ba0c9c7-2f21-4c25-9cef-d8fe4ebe318b"; // Example role ID
// Modify based on the structure seen in the logs
const hasRole = roles.some(role => role._id === targetRoleId); // or role.id if it's different
// Show or hide the section based on the role
if (hasRole) {
$w("#managerButtonSection").show(); // Show the section
} else {
$w("#managerButtonSection").hide(); // Hide the section
}
} else {
console.log("No roles found or response is not an array.");
$w("#managerButtonSection").hide(); // Hide the section if no roles found
}
})
.catch((error) => {
console.log("Error retrieving roles:", error);
});
} else {
$w("#managerButtonSection").hide(); // Hide the section if not logged in
}
});