Multi‑Tenant State Architecture in Angular 20+: Role‑Based Selectors, Permission‑Driven Slices, and Data Isolation with Signals + SignalStore

The hidden state risk in multi‑tenant Angular apps: cross‑tenant bleed

Why multi‑tenant Angular 20+ apps need rigorous statecraft (Signals + SignalStore)

Design the tenant‑aware SignalStore: identity, membership, permissions

// state/tenant/tenant.store.ts
import { computed, signal } from '@angular/core';
import { signalStore, withState, withComputed, withMethods } from '@ngrx/signals';

export type TenantId = string;
export enum Role { Admin = 'admin', Manager = 'manager', Viewer = 'viewer' }
export type Permission =
  | 'tenant:read' | 'tenant:write'
  | 'user:read'   | 'user:write'
  | 'device:read' | 'device:write';

export interface Membership { tenantId: TenantId; roles: Role[] }
export interface User { id: string; memberships: Membership[] }

const PERMISSIONS: Record<Role, readonly Permission[]> = {
  [Role.Admin]:   ['tenant:read','tenant:write','user:read','user:write','device:read','device:write'],
  [Role.Manager]: ['tenant:read','user:read','device:read','device:write'],
  [Role.Viewer]:  ['tenant:read','user:read','device:read'],
};

interface TenantState {
  currentTenantId: TenantId | null;
  user: User | null;
  // Per‑tenant caches: avoid global maps without tenant keys
  devicesByTenant: Record<TenantId, readonly any[]>; // replace any with typed entity
  usersByTenant:   Record<TenantId, readonly any[]>;
}

export const TenantStore = signalStore(
  withState<TenantState>({ currentTenantId: null, user: null, devicesByTenant: {}, usersByTenant: {} }),
  withComputed((state) => {
    const membership = computed(() => {
      const t = state.currentTenantId();
      const u = state.user();
      return t && u ? u.memberships.find(m => m.tenantId === t) ?? null : null;
    });
    const permissions = computed(() => {
      const m = membership();
      if (!m) return new Set<Permission>();
      return new Set(m.roles.flatMap(r => PERMISSIONS[r]));
    });
    const hasPermission = (p: Permission) => computed(() => permissions().has(p));

    const devices = computed(() => {
      const t = state.currentTenantId();
      return t ? state.devicesByTenant()[t] ?? [] : [];
    });

    return { membership, permissions, hasPermission, devices };
  }),
  withMethods((state) => ({
    setTenant(tenantId: TenantId | null) {
      state.currentTenantId.set(tenantId);
    },
    setUser(user: User | null) {
      state.user.set(user);
    },
    upsertDevices(tenantId: TenantId, rows: readonly any[]) {
      state.devicesByTenant.update(map => ({ ...map, [tenantId]: rows }));
    },
    clearTenantCache(tenantId: TenantId) {
      state.devicesByTenant.update(map => { const { [tenantId]:_, ...rest } = map; return rest; });
      state.usersByTenant.update(map => { const { [tenantId]:_, ...rest } = map; return rest; });
    },
  }))
);

Role‑based selectors and permission‑driven slices

// state/selectors.ts
import { computed, Signal } from '@angular/core';
import { TenantStore, Permission } from './tenant.store';

export function selectTenantSlice<T>(
  mapSignal: Signal<Record<string, T>>, // e.g., devicesByTenant
  tenantId: Signal<string | null>,
  required?: Permission,
  hasPermission?: (p: Permission) => Signal<boolean>
): Signal<T | null> {
  return computed(() => {
    const t = tenantId();
    if (!t) return null;
    if (required && hasPermission) {
      if (!hasPermission(required)()) return null;
    }
    const map = mapSignal();
    return (map as any)[t] ?? null;
  });
}

// Usage inside a feature store/service
const tenant = inject(TenantStore);
const devicesForTenant = selectTenantSlice(
  tenant.devicesByTenant, tenant.currentTenantId, 'device:read', tenant.hasPermission
);

<!-- Permission‑driven component controls (PrimeNG example) -->
<p-button
  label="Add Device"
  icon="pi pi-plus"
  [disabled]="!(tenant.hasPermission('device:write')() )"
></p-button>

<p-table *ngIf="tenant.hasPermission('device:read')()" [value]="devicesForTenant() || []">
  <!-- columns -->
</p-table>

Data isolation patterns: caches, effects, and routing guardrails

// effects/tenant.effects.ts (service pattern)
import { inject, DestroyRef, effect } from '@angular/core';
import { TenantStore } from '../state/tenant/tenant.store';
import { HttpClient } from '@angular/common/http';

export class TenantEffects {
  private tenant = inject(TenantStore);
  private http = inject(HttpClient);
  private destroyRef = inject(DestroyRef);

  private _loadDevices = effect((onCleanup) => {
    const t = this.tenant.currentTenantId();
    if (!t || !this.tenant.hasPermission('device:read')()) return;

    const ac = new AbortController();
    this.http.get(`/api/tenants/${t}/devices`, { signal: ac.signal })
      .subscribe(rows => this.tenant.upsertDevices(t, rows as any[]));

    onCleanup(() => ac.abort());
  });
}

// routing/tenant.guard.ts
import { CanMatchFn, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
import { TenantStore } from '../state/tenant/tenant.store';

export const canReadTenant: CanMatchFn = () => {
  const tenant = inject(TenantStore);
  const can = tenant.hasPermission('tenant:read')();
  return can || (document.createElement('a').href = '/forbidden') as unknown as UrlTree;
};

# Nx tagging to enforce boundaries (project.json excerpts)
# tags: ["scope:state", "type:lib"] in state libs
# Enforce: features/* cannot import features/*, only state/* and ui/*
"depConstraints": [
  { "sourceTag": "type:feature", "onlyDependOnLibsWithTags": ["type:ui","scope:state","type:util"] },
  { "sourceTag": "scope:state", "onlyDependOnLibsWithTags": ["type:util"] }
]

What this looks like in the real world (telecom, aviation, insurance)

When to hire an Angular developer for multi‑tenant state rescue

Key takeaways and what to instrument next