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

packages/design-system/src/plugin.ts

@@ -54,7 +54,9 @@ import {
 	N8nUserStack,
 } from './components';
 
-export const N8nPlugin: Plugin<{}> = {
+export interface N8nPluginOptions {}
+
+export const N8nPlugin: Plugin<N8nPluginOptions> = {
 	install: (app) => {
 		app.component('n8n-action-box', N8nActionBox);
 		app.component('n8n-action-dropdown', N8nActionDropdown);

packages/editor-ui/package.json

@@ -47,6 +47,7 @@
     "@jsplumb/util": "^5.13.2",
     "@lezer/common": "^1.0.4",
     "@n8n/codemirror-lang-sql": "^1.0.2",
+    "@n8n/permissions": "workspace:^",
     "@vueuse/components": "^10.5.0",
     "@vueuse/core": "^10.5.0",
     "axios": "^0.21.1",

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>

packages/editor-ui/src/middleware/authenticated.ts

@@ -0,0 +1,19 @@
+import { useUsersStore } from '@/stores';
+import type { RouterMiddleware } from '@/types/router';
+import { VIEWS } from '@/constants';
+
+export type AuthenticatedMiddlewareOptions = {};
+
+export const authenticated: RouterMiddleware<AuthenticatedMiddlewareOptions> = async (
+	to,
+	from,
+	next,
+) => {
+	const usersStore = useUsersStore();
+	const redirect =
+		to.query.redirect ?? encodeURIComponent(`${window.location.pathname}${window.location.search}`);
+
+	if (!usersStore.currentUser) {
+		return next({ name: VIEWS.SIGNIN, query: { redirect } });
+	}
+};

packages/editor-ui/src/middleware/enterprise.ts

@@ -0,0 +1,30 @@
+import type { RouterMiddleware } from '@/types/router';
+import { useSettingsStore } from '@/stores';
+import type { EnterpriseEditionFeature } from '@/constants';
+import { VIEWS } from '@/constants';
+
+export type EnterpriseMiddlewareOptions = {
+	features: EnterpriseEditionFeature[];
+	mode?: 'oneOf' | 'allOf';
+};
+
+export const enterprise: RouterMiddleware<EnterpriseMiddlewareOptions> = async (
+	to,
+	from,
+	next,
+	options,
+) => {
+	const settingsStore = useSettingsStore();
+	const mode = options.mode ?? 'allOf';
+
+	let valid: boolean;
+	if (mode === 'allOf') {
+		valid = options.features.every((feature) => settingsStore.isEnterpriseFeatureEnabled(feature));
+	} else {
+		valid = options.features.some((feature) => settingsStore.isEnterpriseFeatureEnabled(feature));
+	}
+
+	if (!valid) {
+		return next({ name: VIEWS.HOMEPAGE });
+	}
+};

packages/editor-ui/src/middleware/guest.ts

@@ -0,0 +1,18 @@
+import { useUsersStore } from '@/stores';
+import type { RouterMiddleware } from '@/types/router';
+import { VIEWS } from '@/constants';
+
+export type GuestMiddlewareOptions = {};
+
+export const guest: RouterMiddleware<GuestMiddlewareOptions> = async (to, from, next) => {
+	const usersStore = useUsersStore();
+	const redirect = to.query.redirect as string;
+
+	if (usersStore.currentUser) {
+		if (redirect && redirect.startsWith('/')) {
+			next(redirect);
+		}
+
+		return next({ name: VIEWS.HOMEPAGE });
+	}
+};

packages/editor-ui/src/middleware/index.ts

@@ -0,0 +1,12 @@
+import type { RouterMiddlewareType, RouterMiddleware } from '@/types/router';
+import { authenticated } from './authenticated';
+import { enterprise } from './enterprise';
+import { guest } from './guest';
+import { rbac } from './rbac';
+
+export const middleware: Record<RouterMiddlewareType, RouterMiddleware> = {
+	authenticated,
+	enterprise,
+	guest,
+	rbac,
+};

packages/editor-ui/src/middleware/rbac.ts

@@ -0,0 +1,41 @@
+import type { RouterMiddleware } from '@/types/router';
+import { VIEWS } from '@/constants';
+import type { HasScopeOptions, Scope } from '@n8n/permissions';
+import { useRBACStore } from '@/stores/rbac.store';
+import {
+	inferProjectIdFromRoute,
+	inferResourceIdFromRoute,
+	inferResourceTypeFromRoute,
+} from '@/utils/rbacUtils';
+
+export type RBACMiddlewareOptions = {
+	scope: Scope | Scope[];
+	options?: HasScopeOptions;
+};
+
+export const rbac: RouterMiddleware<RBACMiddlewareOptions> = async (
+	to,
+	from,
+	next,
+	{ scope, options },
+) => {
+	const rbacStore = useRBACStore();
+
+	const projectId = inferProjectIdFromRoute(to);
+	const resourceType = inferResourceTypeFromRoute(to);
+	const resourceId = resourceType ? inferResourceIdFromRoute(to) : undefined;
+
+	const valid = rbacStore.hasScope(
+		scope,
+		{
+			projectId,
+			resourceType,
+			resourceId,
+		},
+		options,
+	);
+
+	if (!valid) {
+		return next({ name: VIEWS.HOMEPAGE });
+	}
+};

packages/editor-ui/src/permissions.ts

@@ -8,6 +8,11 @@ import type { IUser, ICredentialsResponse, IWorkflowDb } from '@/Interface';
 import { EnterpriseEditionFeature, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
 import { useSettingsStore } from './stores/settings.store';
 
+/**
+ * Old permissions implementation
+ * @deprecated
+ */
+
 export const enum UserRole {
 	InstanceOwner = 'isInstanceOwner',
 	ResourceOwner = 'isOwner',

packages/editor-ui/src/plugins/components.ts

@@ -6,12 +6,14 @@ import ElementPlus, { ElLoading, ElMessageBox } from 'element-plus';
 import { N8nPlugin } from 'n8n-design-system';
 import { useMessage } from '@/composables/useMessage';
 import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
+import RBAC from '@/components/RBAC.vue';
 
 export const GlobalComponentsPlugin: Plugin<{}> = {
 	install(app) {
 		const messageService = useMessage();
 
 		app.component('enterprise-edition', EnterpriseEdition);
+		app.component('RBAC', RBAC);
 
 		app.use(ElementPlus);
 		app.use(N8nPlugin);