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

The Multi‑Tenant Bug That Tripped Your Dashboard Last Sprint

Why Angular 20 Teams Need Tenant‑Scoped State, Not Global Stores

State Blueprint: Tenant Context, Role‑Based Selectors, Permission‑Driven Slices

import { Injectable, computed, effect, signal } from '@angular/core';

export type Role = 'admin' | 'manager' | 'agent' | 'viewer';
export type Permission =
  | 'devices:read' | 'devices:write'
  | 'users:read'   | 'users:invite'
  | 'billing:read' | 'billing:refund';

export type PermissionMatrix = Record<Role, Permission[]>;

@Injectable({ providedIn: 'root' })
export class TenantContextStore {
  private readonly _tenantId = signal<string | null>(null);
  private readonly _roles = signal<Role[]>([]);
  private readonly _matrix = signal<PermissionMatrix>({} as any);

  readonly tenantId = computed(() => this._tenantId());
  readonly roles = computed(() => this._roles());

  readonly permissions = computed(() => {
    const r = this._roles();
    const m = this._matrix();
    return new Set(r.flatMap(role => m[role] ?? []));
  });

  can = (perm: Permission) => computed(() => this.permissions().has(perm));
  hasRole = (role: Role) => computed(() => this.roles().includes(role));

  setTenant(id: string | null) { this._tenantId.set(id); }
  setRoles(roles: Role[]) { this._roles.set(roles); }
  setMatrix(m: PermissionMatrix) { this._matrix.set(m); }
}

<!-- Permission-driven template gating with Signals -->
<button pButton type="button" label="Refund"
        [disabled]="!ctx.can('billing:refund')()" ></button>

// Optional: style disabled controls consistently across PrimeNG/Material
:host ::ng-deep .p-button[disabled] { opacity: .5; pointer-events: none; }

:

Permission‑Driven Feature Slices Keyed by Tenant

import { inject, Injectable, computed, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TenantContextStore } from './tenant-context.store';

export interface Device { id: string; name: string; status: 'online'|'offline'; }

@Injectable({ providedIn: 'root' })
export class DevicesStore {
  private readonly http = inject(HttpClient);
  private readonly ctx = inject(TenantContextStore);

  // Cache partitioned by tenantId
  private readonly cache = signal<Record<string, Device[]>>({});

  readonly devices = computed(() => {
    const id = this.ctx.tenantId();
    return (id && this.cache()[id]) || [];
  });

  readonly canEdit = this.ctx.can('devices:write');

  load() {
    const tenant = this.ctx.tenantId();
    if (!tenant) return;
    this.http.get<Device[]>(`/api/tenants/${tenant}/devices`)
      .subscribe(list => {
        const next = { ...this.cache() };
        next[tenant] = list;
        this.cache.set(next);
      });
  }

  clearForTenant(tenant: string) {
    const next = { ...this.cache() };
    delete next[tenant];
    this.cache.set(next);
  }
}

// Evict per-tenant caches on switch (and cap memory with a tiny LRU if needed)
import { effect } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DevicesEvictionService {
  constructor(private devices: DevicesStore, private ctx: TenantContextStore) {
    effect(() => {
      const id = this.ctx.tenantId();
      // When tenant changes, clean other entries if you want strict isolation
      if (id) {
        const cache = this.devices['cache']();
        Object.keys(cache).forEach(key => { if (key !== id) this.devices.clearForTenant(key); });
      }
    });
  }
}

I/O Isolation: HTTP Headers, WebSockets, and RxJS→Signals

// HTTP interceptor
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { TenantContextStore } from './tenant-context.store';

@Injectable()
export class TenantInterceptor implements HttpInterceptor {
  constructor(private ctx: TenantContextStore) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const tenant = this.ctx.tenantId();
    const cloned = req.clone({ setHeaders: { 'X-Tenant-Id': tenant ?? '' } });
    return next.handle(cloned);
  }
}

// WebSocket → RxJS → Signal
import { inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { webSocket } from 'rxjs/webSocket';
import { filter, map, retry } from 'rxjs/operators';
import { TenantContextStore } from './tenant-context.store';

type DeviceEvent = { tenantId: string; id: string; status: 'online'|'offline' };

export function useDeviceStream() {
  const ctx = inject(TenantContextStore);
  const tenant = ctx.tenantId; // signal

  const events$ = webSocket<DeviceEvent>('wss://example/ws/devices').pipe(
    retry({ delay: (e, i) => Math.min(1000 * 2 ** i, 10000) })
  );

  const scoped$ = events$.pipe(
    filter(e => e.tenantId === tenant()),
    map(e => ({ id: e.id, status: e.status }))
  );

  return toSignal(scoped$, { initialValue: null });
}

Route‑Scoped Providers and Nx Lib Boundaries

// app.routes.ts (standalone)
import { Routes } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { TenantInterceptor } from './tenant.interceptor';
import { DevicesStore } from './devices.store';

export const routes: Routes = [
  {
    path: 't/:tenantId/devices',
    providers: [
      DevicesStore,
      provideHttpClient(withInterceptors([TenantInterceptor]))
    ],
    loadComponent: () => import('./devices.page').then(m => m.DevicesPage)
  }
];

Example: Device Management Portal — Tenant Isolation in Practice

Testing, Telemetry, and CI Guardrails to Prevent Cross‑Tenant Leaks

// Route guard with Signals
import { CanMatchFn } from '@angular/router';
import { inject } from '@angular/core';
import { TenantContextStore } from './tenant-context.store';

export const canMatchPermission = (perm: Permission): CanMatchFn => () => {
  const ctx = inject(TenantContextStore);
  return ctx.can(perm)();
};

# github/workflows/ci.yml (excerpt)
name: ci
on: [pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - run: pnpm i --frozen-lockfile
      - run: pnpm nx affected -t lint,test,build --parallel=3
      - run: pnpm cypress run --config-file cypress.config.ts
      - run: pnpm lighthouse-ci --budgets budgets.json

// cypress/e2e/tenant-isolation.cy.ts (excerpt)
describe('tenant isolation', () => {
  it('clears state and denies unauthorized actions after switching tenant', () => {
    cy.loginAs('agent');
    cy.visit('/t/TENANT_A/devices');
    cy.contains('Reboot').should('not.exist');
    cy.visit('/t/TENANT_B/devices');
    cy.get('[data-cy=device-row]').each($row => {
      cy.wrap($row).should('not.contain', 'TENANT_A');
    });
  });
});

When to Hire an Angular Developer for Multi‑Tenant State Rescue

Key Takeaways for Your 2025 Angular Roadmap

• Make tenant context a Signal, not a parameter you pass around.

• Build permission-driven selectors once and reuse everywhere (components, guards, templates).

• Partition feature state by tenant and evict aggressively.

• Scope I/O with headers and WebSocket filters; adapt streams to Signals.

• Enforce with tests, telemetry, and CI budgets so regressions can’t sneak in.