Restrict Content in theme

[MarkR]

Hi All

I am adding a new menu item to a theme using Visual studio, which points to a new page I have created that will have some download forms on there for users. But I only want specific user groups to be able to see the download links. Is there a way that I can control what links or page content a user can see depending on what group they belong to? And they may belong to multiple groups, I just need to know if they are in a specific group or not.

Thanks

[couch]

//Import uStoreProvider if it is not already in your component:
import { UStoreProvider } from '@ustore/core'

//Get the current logged in user
const { currentUser } = UStoreProvider.state.get() || {}

//Get the user groups that the user is a member of
const userGroups = (currentUser && currentUser.Groups) || []

//Define the group(s) that should see the menu
const allowedGroups = ["Managers","VIPs"]

//then add your menu only if the user is in the menu
//code depends on how you are creating your menu item

//Bonus trick:
//Instead of hard-coding the names of the permitted groups into the theme, you could instead
//define a new variable and add the variable into the config.json so that the theme editor can
//be used to change the permitted groups instead of having to edit and publish a new theme.

const allowedGroups = getVariableValue('--cust-menu-usergroup', '')
  .split(',')
  .map(name => name.trim().toLowerCase())
  .filter(name => name.length > 0)

[MarkR]

Thanks Couch. That's great.

If the user is in more than one group, and I want to do a simple if/else statement to control what shows, I assume "if (userGroups === allowedGroups)" wont work. Do I need to filter the userGroups const down to the allowed groups?

Thanks again

[Stephen Couch]

Not sure where/how you are adding the menu to your theme, but in the past, I have added menus to the nav bar (CategoriesNavbar.js) by building the customMenu, and then adding it to the default uStore menu like this:

const customMenus = [{ text: "new item", url: "https://www.company.com", id: "custom-1"}].map(menu => ({

  Category: {
    FriendlyID: menu.id,
    Name: menu.text,
    isCustom: true,
    customUrl: menu.url
  },
  SubCategories: []
}))

const allMenuItems = [...customMenus, ...categoriesTree]

Then used the "allMenuItems" instead of the default "categoriesTree" in the return() block.

To add the user group logic, it would be like this:

//determine if one of the user's groups is the same as one of the allowed groups

const userInAllowedGroup =
  allowedGroups.length === 0 ||
  userGroups.some(group => allowedGroups.includes((group.Name || '').toLowerCase()))

//add the menu if it is, otherwise just use the default categoriesTree

const  allMenuItems  = (userInAllowedGroup ? [...customMenus, ...categoriesTree], [...categoriesTree])

//untested so excuse typos

--
You received this message because you are subscribed to the Google Groups "XMPie Interest Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xmpie-users...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/xmpie-users/3e7fdff5-ef6b-43d8-99a6-7c08b5e17961n%40googlegroups.com.