Alternative to #3041: gate UI on my/routes (allowed-route manifest)

src/Frontend/src/App.vue

@@ -8,21 +8,21 @@ import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "@/stores/AuthStore";
-import { usePermissions } from "@/composables/usePermissions";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
 
 const authStore = useAuthStore();
 const route = useRoute();
 const { isAuthenticated, authEnabled } = storeToRefs(authStore);
 
-// Load the user's effective permissions (my/permissions/all) once authenticated, so the
-// nav and other UI can gate on them. Fail-safe: a missing/old endpoint just leaves
-// permissions unloaded and the UI fails open.
-const { fetchDescriptor } = usePermissions();
+// Load the allowed-route manifest (my/routes) once authenticated, so the nav and other
+// UI can gate on it. Fail-safe: a missing/old endpoint just leaves the manifest unloaded
+// and the UI fails open.
+const { fetchManifest } = useAllowedRoutes();
 watch(
   [authEnabled, isAuthenticated],
   ([enabled, authenticated]) => {
     if (enabled && authenticated) {
-      fetchDescriptor();
+      fetchManifest();
     }
   },
   { immediate: true }

src/Frontend/src/components/PageHeader.vue

@@ -15,31 +15,32 @@ import AuditMenuItem from "./audit/AuditMenuItem.vue";
 import monitoringClient from "@/components/monitoring/monitoringClient";
 import UserProfileMenuItem from "@/components/UserProfileMenuItem.vue";
 import { useAuthStore } from "@/stores/AuthStore";
-import { usePermissions } from "@/composables/usePermissions";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 import { storeToRefs } from "pinia";
 
 const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
 
 const authStore = useAuthStore();
 const { authEnabled, isAuthenticated } = storeToRefs(authStore);
 
-const { can, ready } = usePermissions();
+const { canCall, ready } = useAllowedRoutes();
 
-// Each item gates on the specific permission ServiceControl enforces for that area.
+// Each item gates on the specific route ServiceControl enforces for that area.
 // Gate-on-ready: render nothing until permissions are known, so items never appear and
-// then disappear. can() fails open, so auth-disabled / failed-load shows everything.
+// then disappear. canCall() fails open, so auth-disabled / failed-load shows everything.
 // prettier-ignore
 const menuItems = computed(() => {
   if (!ready.value) return [];
   return [
     DashboardMenuItem,
-    ...(can("error:heartbeats:view") ? [HeartbeatsMenuItem] : []),
-    ...(isMonitoringEnabled && can("monitoring:endpoint:view") ? [MonitoringMenuItem] : []),
-    ...(can("audit:message:view") ? [AuditMenuItem] : []),
-    ...(can("error:messages:view") ? [FailedMessagesMenuItem] : []),
-    ...(can("error:customchecks:view") ? [CustomChecksMenuItem] : []),
-    ...(can("error:eventlog:view") ? [EventsMenuItem] : []),
-    ...(can("error:throughput:view") ? [ThroughputMenuItem] : []),
+    ...(canCall(ApiRoutes.viewHeartbeats) ? [HeartbeatsMenuItem] : []),
+    ...(isMonitoringEnabled && canCall(ApiRoutes.viewMonitoredEndpoints) ? [MonitoringMenuItem] : []),
+    ...(canCall(ApiRoutes.viewAuditMessages) ? [AuditMenuItem] : []),
+    ...(canCall(ApiRoutes.viewFailedMessages) ? [FailedMessagesMenuItem] : []),
+    ...(canCall(ApiRoutes.viewCustomChecks) ? [CustomChecksMenuItem] : []),
+    ...(canCall(ApiRoutes.viewEventLog) ? [EventsMenuItem] : []),
+    ...(canCall(ApiRoutes.viewThroughput) ? [ThroughputMenuItem] : []),
     ConfigurationMenuItem,
     FeedbackButton,
   ];

src/Frontend/src/components/configuration/HealthCheckNotifications.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import LicenseNotExpired from "../LicenseNotExpired.vue";
 import ServiceControlAvailable from "../ServiceControlAvailable.vue";
 import HealthCheckNotifications_EmailConfiguration from "./HealthCheckNotifications_ConfigureEmail.vue";
@@ -13,14 +13,10 @@ import PermissionGate from "@/components/PermissionGate.vue";
 import { faCheck, faEdit, faEnvelope, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { useHealthChecksStore } from "@/stores/HealthChecksStore";
 import { storeToRefs } from "pinia";
-import { usePermissions } from "@/composables/usePermissions";
 
 const healthChecksStore = useHealthChecksStore();
-const { emailNotifications } = storeToRefs(healthChecksStore);
+const { emailNotifications, canManageNotifications, canTestNotifications } = storeToRefs(healthChecksStore);
 
-const { can } = usePermissions();
-const canManageNotifications = computed(() => can("error:notifications:manage"));
-const canTestNotifications = computed(() => can("error:notifications:test"));
 const manageDeniedTooltip = "You don't have permission to manage notifications.";
 const testDeniedTooltip = "You don't have permission to send test notifications.";
 

src/Frontend/src/components/configuration/RetryRedirects.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import LicenseNotExpired from "../LicenseNotExpired.vue";
 import ServiceControlAvailable from "../ServiceControlAvailable.vue";
 import NoData from "../NoData.vue";
@@ -15,13 +15,11 @@ import PermissionGate from "@/components/PermissionGate.vue";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { useRedirectsStore } from "@/stores/RedirectsStore";
 import LoadingSpinner from "../LoadingSpinner.vue";
-import { usePermissions } from "@/composables/usePermissions";
+import { storeToRefs } from "pinia";
 
 const redirectsStore = useRedirectsStore();
-
-const { can } = usePermissions();
+const { canManageRedirects } = storeToRefs(redirectsStore);
 // Creating, modifying and ending redirects all manage redirects.
-const canManageRedirects = computed(() => can("error:redirects:manage"));
 const redirectsDeniedTooltip = "You don't have permission to manage redirects.";
 
 const loadingData = ref(true);