feat(editor): Add routing middleware, permission checks, RBAC store, RBAC component (#7702)

Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>

packages/editor-ui/src/components/RBAC.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+import type { PropType } from 'vue';
+import { computed, defineComponent } from 'vue';
+import { useRBACStore } from '@/stores/rbac.store';
+import type { HasScopeMode, Scope, Resource } from '@n8n/permissions';
+import {
+	inferProjectIdFromRoute,
+	inferResourceIdFromRoute,
+	inferResourceTypeFromRoute,
+} from '@/utils/rbacUtils';
+import { useRoute } from 'vue-router';
+
+export default defineComponent({
+	props: {
+		scope: {
+			type: [String, Array] as PropType<Scope | Scope[]>,
+			required: true,
+		},
+		mode: {
+			type: String as PropType<HasScopeMode>,
+			default: 'allOf',
+		},
+		resourceType: {
+			type: String as PropType<Resource>,
+			default: undefined,
+		},
+		resourceId: {
+			type: String,
+			default: undefined,
+		},
+		projectId: {
+			type: String,
+			default: undefined,
+		},
+	},
+	setup(props, { slots }) {
+		const rbacStore = useRBACStore();
+		const route = useRoute();
+
+		const hasScope = computed(() => {
+			const projectId = props.projectId ?? inferProjectIdFromRoute(route);
+			const resourceType = props.resourceType ?? inferResourceTypeFromRoute(route);
+			const resourceId = resourceType
+				? props.resourceId ?? inferResourceIdFromRoute(route)
+				: undefined;
+
+			return rbacStore.hasScope(
+				props.scope,
+				{
+					projectId,
+					resourceType,
+					resourceId,
+				},
+				{ mode: props.mode },
+			);
+		});
+
+		return () => (hasScope.value ? slots.default?.() : slots.fallback?.());
+	},
+});
+</script>