前端实用技巧 | 租户系统前端开发方案，合理区分不同租户类型的操作功能

叶一一
602 阅读7分钟

一、引言

新年伊始，万象更新。

又到了一年一度立Flag的时候了。

过去一年，我阅读了众多技术书籍，但是，纸上得来终觉浅，所以我一直纠结如何将看到的转化为用到的，并能沉淀成可传播的。

新的一年，与其纠结过去，不如行在当下。

「前端使用技巧」，这个系列是必不可少的。

顺应时代浪潮，我还准备在朝着智能化方向迈进，同时探索如何利用新兴技术构建更流畅、更智能、更具吸引力的用户界面。

在多租户系统中，同一个页面可能需要根据不同的租户类型展示不同的操作功能。这种需求在SaaS（软件即服务）应用中很常见，因为不同的租户可能有不同的权限、功能需求或业务逻辑。

随着业务的发展，我们某类租户的特定需求也越来越复杂。为了应对日益变化的业务，一个灵活且可维护的方案十分必要。

本文将探讨如何在同一个页面中根据租户类型区分操作功能，并提供一个较为完善的前端开发方案。

二、需求分析

在多租户系统中，通常有以下几种场景需要区分租户类型：

  1. 功能权限控制：不同租户类型可能拥有不同的功能权限。例如，管理员租户可以删除数据，而普通租户只能查看数据。
  2. UI展示差异：不同租户类型可能需要展示不同的UI组件或样式。
  3. 业务逻辑区分：不同租户类型可能需要执行不同的业务逻辑。例如，企业租户和个人租户的数据处理方式可能不同。

为了实现这些需求，我们需要一个灵活且可扩展的方案。

三、前端开发方案

1. 使用角色或租户类型标识

在系统中，每个租户通常会有一个标识（如tenantType或role），用于区分其类型。这个标识可以通过以下方式获取：

  • 从后端API返回的用户信息中获取。
  • 从本地存储（如localStorage或sessionStorage）中读取。

在前端，我们可以将这个标识存储在全局状态管理工具（如Redux、Recoil或Context API）中，方便在页面中访问。

示例代码：获取租户类型

// 从API获取用户信息
const userInfo = await fetchUserInfo();
const tenantType = userInfo.tenantType; // 例如：'admin', 'enterprise', 'individual'

2. 基于租户类型的条件渲染

根据租户类型，我们可以使用条件渲染技术来展示不同的UI组件或操作功能。React中的条件渲染可以通过以下方式实现：

  • 三元运算符：适合简单的条件渲染。
  • if语句：适合复杂的逻辑。
  • 高阶组件（HOC） ：适合封装通用的权限控制逻辑。
  • 自定义Hook：适合复用租户类型相关的逻辑。

示例代码：条件渲染

function TenantDashboard({ tenantType }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {tenantType === 'admin' && <AdminActions />}
      {tenantType === 'enterprise' && <EnterpriseActions />}
      {tenantType === 'individual' && <IndividualActions />}
    </div>
  );
}

3. 封装租户类型逻辑

为了减少重复代码，我们可以将租户类型相关的逻辑封装到自定义Hook或工具函数中。

示例代码：自定义Hook

function useTenantActions(tenantType) {
  const actions = {
    admin: ['delete', 'edit', 'view'],
    enterprise: ['edit', 'view'],
    individual: ['view'],
  };

  return actions[tenantType] || [];
}

actions 的对象包含了三个属性：admin、enterprise 和 individual，每个属性对应一个数组，数组中包含了与该租户类型相关的操作。

函数的返回值是 actions 对象中与 tenantType 对应的数组，如果 tenantType 不存在于 actions 对象中，则返回一个空数组。

在组件中使用：

function TenantActions({ tenantType }) {
  const actions = useTenantActions(tenantType);

  return (
    <div>
      {actions.includes('delete') && <button>Delete</button>}
      {actions.includes('edit') && <button>Edit</button>}
      {actions.includes('view') && <button>View</button>}
    </div>
  );
}

4. 使用配置化方案

对于复杂的租户类型区分，可以采用配置化的方案。将不同租户类型的配置存储在对象或JSON文件中，根据租户类型动态加载配置。

示例代码：配置化方案

const tenantConfig = {
  admin: {
    actions: ['delete', 'edit', 'view'],
    components: [AdminPanel, AdminActions],
  },
  enterprise: {
    actions: ['edit', 'view'],
    components: [EnterprisePanel, EnterpriseActions],
  },
  individual: {
    actions: ['view'],
    components: [IndividualPanel],
  },
};

function TenantDashboard({ tenantType }) {
  const config = tenantConfig[tenantType];

  return (
    <div>
      <h1>Dashboard</h1>
      {config.components.map((Component, index) => (
        <Component key={index} />
      ))}
    </div>
  );
}

tenantConfig 的对象包含了三个属性：admin、enterprise 和 individual，每个属性对应一个对象，该对象包含了两个属性：actions 和 components。actions 属性是一个数组，包含了该租户类型可以执行的操作；components 属性是一个数组，包含了该租户类型对应的组件。

使用TenantDashboard 组件展示最终的内容，该组件接受一个名为 tenantType 的属性，用于指定租户类型。通过 tenantConfig[tenantType] 获取与该租户类型对应的配置对象 config。

最终实现了根据租户类型动态渲染仪表板内容的效果。

5. 权限控制与路由拦截

如果不同租户类型的操作功能差异较大，可以考虑使用路由拦截来控制页面访问权限。例如，使用React Router实现路由级别的权限控制。

示例代码：路由拦截

import { Route, Redirect } from 'react-router-dom';

function ProtectedRoute({ tenantType, allowedTypes, component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        allowedTypes.includes(tenantType) ? (
          <Component {...props} />
        ) : (
          <Redirect to="/unauthorized" />
        )
      }
    />
  );
}

// 使用
<ProtectedRoute
  path="/admin"
  tenantType={tenantType}
  allowedTypes={['admin']}
  component={AdminPage}
/>;

ProtectedRoute 组件接受以下几个属性：

  • tenantType：当前用户的租户类型。
  • allowedTypes：一个数组，包含允许访问该路由的租户类型。
  • component：需要保护的组件。
  • ...rest：其他传递给 Route 组件的属性。

在 ProtectedRoute 组件内部，它使用了 react-router-dom 中的 Route 组件来定义路由。Route 组件的 render 属性是一个函数，它接收当前路由的 props 作为参数，并返回一个 React 元素。

在 render 函数内部，它首先检查 allowedTypes 数组中是否包含当前用户的 tenantType。如果包含，则渲染传入的 Component 组件，并将 props 传递给它；如果不包含，则重定向到 /unauthorized 页面。

最后，ProtectedRoute 组件返回一个 Route 组件，并将所有传入的属性传递给它。

通过这种方式，ProtectedRoute 组件可以确保只有具有特定租户类型的用户才能访问受保护的路由，从而实现了路由级别的权限控制。

6. 样式差异化

如果不同租户类型需要展示不同的样式，可以使用CSS类名或CSS-in-JS技术动态加载样式。

示例代码：动态样式

function TenantPage({ tenantType }) {
  return (
    <div className={`tenant-page ${tenantType}`}>
      <h1>Welcome, {tenantType}!</h1>
    </div>
  );
}

// CSS
.tenant-page.admin {
  background-color: #f0f0f0;
}
.tenant-page.enterprise {
  background-color: #e0e0e0;
}
.tenant-page.individual {
  background-color: #d0d0d0;
}

四、方案总结

方案适用场景优点缺点
条件渲染简单的UI差异实现简单，直观逻辑复杂时代码冗余
自定义Hook复用租户类型逻辑逻辑复用，代码清晰需要额外封装
配置化方案复杂的租户类型区分灵活，易于扩展配置管理可能复杂
路由拦截页面级别的权限控制安全性高，逻辑清晰需要路由库支持
动态样式样式差异化样式与逻辑分离需要维护多套样式

五、结语

在多租户系统中，合理区分不同租户类型的操作功能是提升用户体验和系统安全性的关键。通过条件渲染、自定义Hook、配置化方案、路由拦截和动态样式等技术，开发者可以设计出灵活且可维护的前端方案。

在实际开发中，建议根据具体需求选择合适的方案，并遵循以下原则：

  1. 保持代码简洁：避免过度设计，尽量使用简单的条件渲染或自定义Hook。
  2. 提高可维护性：通过配置化方案或封装逻辑，减少重复代码。
  3. 确保安全性：使用路由拦截等技术，防止未授权访问。
avatar
文章
阅读
粉丝