Client Permissions

​

Overview

​

Client Permissions

​

Key Components

1. ClientRole Interface: Defines the structure of a client role, including attributes like role alias, validity dates, resource, permissions, and membership type.
2. RoleMembership Enum: Specifies different types of role memberships - USER, PROJECT, and NONE_RESOURCE.
3. Permission Helper (permission.helper.ts): Provides utility functions to work with client roles, such as checking if an alias exists in the permission array of a given token role and filtering client roles by membership.

​

Core Methods

​

checkIfAliasIsInTokenRoles

• Purpose: Checks if a given alias exists in the permission array of token roles.
• Implementation: Iterates through token roles, comparing each role’s permissions and alias with the given alias.

​

filterClientRolesByMembership

• Purpose: Separates token roles based on membership type.
• Returns: An object containing arrays of projectRoles, userRoles, and noneResourceRoles.

​

fetchAndSetClientRoles

• Functionality: Fetches client roles from a service and sets them in the store.
• Error Handling: Logs errors and shows alerts if the fetching process fails.

​

checkIfUserHasPermission

• Main Method: Checks if a user has a specific permission.
• Functionality: Determines access based on project roles, user roles, and non-resource roles. It can ignore resource constraints if specified.

​

Usage Example

const SidebarNavigationItem = ({
  className,
  id,
  children,
  icon,
  path,
  permissionAlias, // permission to check if user has permission to access nav item
  userStore,
}: SidebarNavigationItemProps): JSX.Element => {
  const hasPermission = userStore?.checkIfUserHasPermission({ 
    alias: permissionAlias, // check if user has permission to access nav item
  });

  const navigate = useNavigate();
  const location = useLocation();

  const sidebarNavigationItemClassName = classNames({
    "navigation-item-wrapper": true,
    "navigation-item-wrapper--active": location.pathname.includes(path),
  }, className);

  if (!hasPermission) return <></>; // don't render if user doesn't have permission

  return (
    <div
      className={sidebarNavigationItemClassName}
      id={id}
      onClick={() => navigate(path)}
    >
      <FontAwesomeIcon className="sidebar-item-icon" icon={icon} />
      <RunningText className="sidebar-item-label">{children}</RunningText>
    </div>
  );
};

export default inject("userStore")(observer(SidebarNavigationItem));