React基於RBAC的許可權控制

让速不让路發表於2024-05-14
React

簡單實現

基於RBAC（Role-Based Access Control，基於角色的訪問控制）的許可權控制，可以透過定義角色和許可權，然後將許可權分配給不同的角色來實現。使用者根據其角色獲得相應的許可權，進而訪問特定的路由、頁面元件或者操作。

以下是在React應用中實現RBAC的一個簡單示例。這個示例包括了路由保護、頁面內元件顯示控制以及下拉選擇（select）控制元件中選項的顯示控制。

1. 定義角色和許可權

首先，我們需要定義應用中的角色和許可權。通常，這些資訊會儲存在後端，這裡我們簡化為前端靜態資料。

// roles.js
const roles = {
  admin: {
    permissions: ['view_dashboard', 'edit_dashboard', 'view_selection', 'edit_selection']
  },
  user: {
    permissions: ['view_dashboard', 'view_selection']
  }
};

export default roles;

2. 許可權檢查函式

接下來，我們定義一個許可權檢查函式，用於判斷當前使用者是否具有特定許可權。

// auth.js
import roles from './roles';

export function hasPermission(userRole, permission) {
  const permissions = roles[userRole]?.permissions || [];
  return permissions.includes(permission);
}

3. 路由保護

對於路由保護，我們可以使用React Router的<Route>元件結合許可權檢查函式來實現。

// ProtectedRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { hasPermission } from './auth';

const ProtectedRoute = ({ component: Component, userRole, permission, ...rest }) => (
  <Route {...rest} render={
    props => hasPermission(userRole, permission) ? 
      (<Component {...props} />) : 
      (<Redirect to="/unauthorized" />)
  } />
);

export default ProtectedRoute;

4. 頁面內的元件顯示控制

頁面內的元件顯示控制也可以透過許可權檢查函式來實現。

// SomeComponent.js
import React from 'react';
import { hasPermission } from './auth';

const SomeComponent = ({ userRole }) => {
  return (
    <div>
      {hasPermission(userRole, 'view_dashboard') && <div>Dashboard View</div>}
      {hasPermission(userRole, 'edit_dashboard') && <button>Edit Dashboard</button>}
    </div>
  );
};

export default SomeComponent;

5. Selection的部分option控制

對於下拉選擇控制元件中選項的顯示控制，同樣可以透過許可權檢查函式來實現。

// SelectionComponent.js
import React from 'react';
import { hasPermission } from './auth';

const SelectionComponent = ({ userRole }) => {
  return (
    <select>
      <option value="option1">Option 1</option>
      {hasPermission(userRole, 'edit_selection') && <option value="option2">Option 2</option>}
    </select>
  );
};

export default SelectionComponent;

總結

以上示例展示瞭如何在React應用中基於RBAC實現許可權控制。透過定義角色和許可權、編寫許可權檢查函式以及在路由、元件和選擇控制元件中使用這些函式，可以靈活地控制應用中的訪問許可權。這只是一個基礎的示例，實際應用中可能需要更復雜的許可權管理策略，包括但不限於動態許可權分配、細粒度控制等。

不足

直接在各處呼叫hasPermission函式進行許可權控制確實是一種簡單直接的方式，它提供了快速實現功能許可權控制的方法。然而，這種方法在一些方面可能存在潛在的問題，尤其是在大型應用或者需要頻繁更新許可權規則的場景中。以下是一些可能的缺點：

1. 程式碼重複

在應用的多個地方直接呼叫hasPermission函式，可能會導致大量重複的許可權檢查程式碼。這不僅增加了程式碼量，也降低了程式碼的可讀性和可維護性。當許可權邏輯發生變化時，開發者可能需要在多個地方進行更新，這增加了出錯的風險。

2. 許可權邏輯與業務邏輯耦合

將許可權檢查邏輯直接嵌入到元件或頁面中，會導致許可權邏輯與業務邏輯的耦合。這種耦合使得修改許可權邏輯可能會影響到業務邏輯，反之亦然。在理想的架構設計中，我們希望將這兩部分邏輯解耦，以便獨立地修改和擴充套件它們。

3. 許可權分散管理

如果許可權檢查邏輯分散在整個應用的各個部分，那麼管理和審計許可權規則將變得非常困難。這種分散的管理方式可能導致許可權規則的不一致，使得理解和驗證系統的安全性變得更加複雜。

4. 難以實現高階許可權控制特性

隨著應用的發展，可能需要實現更復雜的許可權控制特性，比如基於條件的許可權控制（如時間、地點等因素）、角色繼承、許可權組合等。如果許可權控制邏輯直接散佈在應用各處，實現這些高階特性將變得非常困難。

改進方法

為了解決上述問題，可以採取以下一些改進措施：

  • 使用高階元件（HOC）或自定義Hooks：透過封裝許可權檢查邏輯，可以減少重複程式碼，同時也便於維護和更新許可權邏輯。
  • 集中管理許可權規則：將所有的許可權規則集中管理，比如使用外部配置檔案或服務，這樣可以方便地更新和稽核許可權規則。
  • 許可權與業務邏輯解耦：儘量保持許可權邏輯與業務邏輯的分離，可以使用上下文（Context）或Redux等狀態管理庫來實現。
  • 設計靈活的許可權模型：設計一個能夠適應未來需求變化的許可權模型，考慮到擴充套件性和靈活性，以便於新增新的許可權控制特性。

透過採取這些措施，可以在保持應用安全性的同時，提高程式碼的可維護性和可擴充套件性。

沒有許可權時的不同表現

為了處理不同元件在沒有許可權時的不同表現，我們可以透過建立自定義Hooks和高階元件（HOC）來實現更靈活的許可權控制。這種方式可以幫助我們根據許可權來調整元件的渲染行為，例如顯示、隱藏、渲染為另一個元件或禁用等。

使用自定義Hooks處理許可權

自定義Hooks提供了一種非常靈活的方式來封裝和重用邏輯。以下是一個自定義Hook useAuth 的示例，它根據使用者的角色和所需許可權返回相應的狀態。

import { hasPermission } from './auth';

// 自定義Hook，用於檢查許可權
function useAuth(userRole, permission) {
  const isAllowed = hasPermission(userRole, permission);
  return { isAllowed };
}

使用高階元件（HOC）封裝許可權邏輯

高階元件（HOC）是另一種封裝和重用元件邏輯的方法。我們可以建立一個HOC來根據許可權控制元件的渲染行為。

import React from 'react';
import { hasPermission } from './auth';

// 高階元件，用於許可權控制
const withAuth = (WrappedComponent, permission) => {
  return class extends React.Component {
    render() {
      const { userRole, ...rest } = this.props;
      const isAllowed = hasPermission(userRole, permission);

      if (!isAllowed) {
        // 根據需要返回null，或者重定向，或者渲染一個無許可權的提示元件等
        return null; // 或者 <Redirect to="/unauthorized" /> 等
      }

      return <WrappedComponent {...rest} />;
    }
  };
};

示例：結合自定義Hooks和HOC使用

假設我們有一個編輯按鈕，只有具有edit_dashboard許可權的使用者才能看到並使用這個按鈕。我們可以使用自定義Hooks或HOC來控制這個按鈕的行為。

使用自定義Hooks

import React from 'react';
import { useAuth } from './useAuth';

const EditButton = ({ userRole }) => {
  const { isAllowed } = useAuth(userRole, 'edit_dashboard');

  if (!isAllowed) {
    return null; // 或者其他處理方式，如渲染一個禁用的按鈕等
  }

  return <button>Edit</button>;
};

使用HOC

import React from 'react';
import { withAuth } from './withAuth';

const Button = () => <button>Edit</button>;

// 使用HOC封裝按鈕，只有具有edit_dashboard許可權的使用者才能看到這個按鈕
const EditButton = withAuth(Button, 'edit_dashboard');

// 在使用EditButton時，需要傳入userRole

處理不同的表現形式

  • 對於路由，可以使用<ProtectedRoute>元件，結合自定義Hooks或HOC來控制訪問許可權，根據許可權重定向到不同的頁面。
  • 對於選單和按鈕，可以使用自定義Hooks或HOC來控制它們的渲染，根據許可權顯示、隱藏或渲染為禁用狀態。
  • 對於選項和其他元件，同樣可以利用自定義Hooks或HOC來根據許可權調整它們的渲染行為。

透過這種方式，我們可以根據元件的不同需求靈活地實現基於RBAC的許可權控制，同時保持程式碼的清晰和可維護性。

相關文章