add a routing middleware

middleware/routing.global.ts

@@ -0,0 +1,20 @@
+import { useAbility } from '@casl/vue'
+
+export default defineNuxtRouteMiddleware((to, _) => {
+  const ability = useAbility()
+
+  const candidates = [to.name].concat(to.matched.map((route) => route.name))
+
+  const pages = ability.rules
+    .filter((rule) => rule.action.toString() === 'display')
+    .map((rule) => rule.subject.toString())
+
+  candidates.forEach((routeName) => {
+    const name: string = routeName?.toString() ?? ''
+
+    if (name && pages.includes(name) && !ability.can('display', name)) {
+      console.error('No right to see this page')
+      navigateTo('/')
+    }
+  })
+})

pages/parameters.vue

@@ -14,6 +14,7 @@
  */
 definePageMeta({
   layout: false,
+  name: 'parameters_page',
 })
 </script>