Allow multiple access for secured routes (#946)

src/App.tsx

@@ -53,7 +53,12 @@ const RealmPathSelector = ({ children }: { children: ReactNode }) => {
 type SecuredRouteProps = { route: RouteDef };
 const SecuredRoute = ({ route }: SecuredRouteProps) => {
   const { hasAccess } = useAccess();
-  if (hasAccess(route.access)) return <route.component />;
+  const accessAllowed =
+    route.access instanceof Array
+      ? hasAccess(...route.access)
+      : hasAccess(route.access);
+
+  if (accessAllowed) return <route.component />;
 
   return <ForbiddenSection />;
 };

src/PageNav.tsx

@@ -39,7 +39,17 @@ export const PageNav: React.FunctionComponent = () => {
     const route = routes.find(
       (route) => route.path.replace(/\/:.+?(\?|(?:(?!\/).)*|$)/g, "") === path
     );
-    if (!route || !hasAccess(route.access)) return <></>;
+
+    const accessAllowed =
+      route &&
+      (route.access instanceof Array
+        ? hasAccess(...route.access)
+        : hasAccess(route.access));
+
+    if (!accessAllowed) {
+      return null;
+    }
+
     //remove "/realm-name" from the start of the path
     const activeItem = history.location.pathname.substr(realm.length + 1);
     return (

src/realm-roles/routes/RealmRole.ts

@@ -13,7 +13,7 @@ export const RealmRoleRoute: RouteDef = {
   path: "/:realm/roles/:id/:tab?",
   component: RealmRoleTabs,
   breadcrumb: (t) => t("roles:roleDetails"),
-  access: "view-realm",
+  access: ["view-realm", "view-users"],
 };
 
 export const toRealmRole = (

src/route-config.ts

@@ -21,7 +21,7 @@ export type RouteDef = {
   path: string;
   component: ComponentType;
   breadcrumb?: (t: TFunction) => string | ComponentType<any>;
-  access: AccessType;
+  access: AccessType | AccessType[];
   matchOptions?: MatchOptions;
 };