詳解如何封裝和使用一個React鑒權組件

更新時間：2024年03月07日 08:18:38 作者：慕仲卿

JavaScript?和?React?提供了靈活的事件處理機制,特別是通過利用事件的捕獲階段來阻止事件傳播可以實現(xiàn)精細的權限控制,本文將詳細介紹這一技術的應用,并通過實踐案例展示如何封裝和使用一個?React?鑒權組件,需要的可以參考下

在構建復雜的 Web 應用時，經(jīng)常會遇到需要基于用戶權限來控制元素事件訪問性的情況。這不僅涉及到用戶體驗的提升，更關乎應用安全性的加固。JavaScript 和 React 提供了靈活的事件處理機制，特別是通過利用事件的捕獲階段來阻止事件傳播可以實現(xiàn)精細的權限控制。本文將詳細介紹這一技術的應用，并通過實踐案例展示如何封裝和使用一個 React 鑒權組件。

1. 在事件的捕獲階段阻止事件的傳播

為了更好地理解如何在捕獲階段阻止事件的傳播，讓我們先從一個完整的 HTML 頁面示例開始：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Capture and Authorization</title>
    <style>
        .container { padding: 20px; background-color: #f0f0f0; }
        .button { padding: 10px; background-color: #007bff; color: white; cursor: pointer; }
    </style>
</head>
<body>

<div class="container" id="container">
    Click Me
    <div class="button" id="button">Authorized Action</div>
</div>

<script>
    document.getElementById('container').addEventListener('click', function(event) {
        alert('Container clicked!');
    }, true); // Use capture phase

    document.getElementById('button').addEventListener('click', function(event) {
        event.stopPropagation(); // Stop event from reaching the container
        alert('Button clicked!');
    }, false); // Use bubble phase
</script>

</body>
</html>

在這個示例中，我們有一個容器和一個按鈕。當按鈕在沒有授權的情況下被點擊時，我們通過在捕獲階段為容器添加的事件監(jiān)聽器中調(diào)用 event.stopPropagation() 方法，阻止了事件向上傳播。這樣，即使按鈕被點擊，容器的點擊事件也不會被觸發(fā)，從而實現(xiàn)了基于權限的事件控制。

2. 阻止事件傳播的意義

阻止事件在捕獲階段的傳播不僅是一個技術行為，它背后的意義更加深遠。首先，從安全性角度考慮，這可以防止未授權的用戶觸發(fā)敏感操作，如刪除數(shù)據(jù)、修改配置等，從而有效地防范安全風險。其次，從用戶體驗角度來看，合理地控制事件傳播可以避免用戶誤操作，尤其是在復雜的交互設計中，能夠確保應用的操作邏輯更加清晰和穩(wěn)定。最后，這種機制還提供了一種靈活的事件管理方式，使開發(fā)者能夠更精細地控制應用的行為和響應，增強了應用的可維護性和擴展性。

3. 封裝一個鑒權組件

在構建React前端應用時，確保用戶在執(zhí)行特定操作前已通過身份驗證是常見需求。React 提供了靈活的方式來處理這種情況，特別是結合事件捕獲機制。以下是如何逐步封裝一個利用事件捕獲機制進行用戶鑒權的 React 組件的詳細解釋。

3.1 使用 useRef 創(chuàng)建引用

const ref = useRef(null);

useRef 是一個 React 鉤子（Hook），它創(chuàng)建了一個可變的 ref 對象，并將其賦值為 null。這個 ref 對象可以被附加到 React 元素上，允許我們直接訪問 DOM 元素。在我們的鑒權組件中，這使得我們能夠直接在 DOM 元素上添加和移除事件監(jiān)聽器。

3.2 定義事件監(jiān)聽器并在捕獲階段注冊

useEffect(() => {
    const handleClickCapture = (e) => {
        if(disabled) return;
        if(!isUserLogin(window.loginInfo && window.loginInfo.userInfo)) {
            e.stopPropagation();
            Modal.clear();
            Modal.confirm({
                bodyClassName: "modal-confirm-body",
                content: intl.get("helptext_login_first"),
                cancelText: intl.get("text_cancel"),
                confirmText: intl.get("text_log_in"),
                onConfirm: () => native_LoginAgain.call()
            });
        }
    };

    const currentElement = ref.current;
    currentElement.addEventListener('click', handleClickCapture, true);

    return () => {
        currentElement.removeEventListener('click', handleClickCapture, true);
    };
}, [disabled]);

在 useEffect 鉤子內(nèi)，我們定義了一個 handleClickCapture 函數(shù)，該函數(shù)會在點擊事件發(fā)生時被調(diào)用。通過設置 addEventListener 的第三個參數(shù)為 true，我們指示瀏覽器在捕獲階段觸發(fā)此監(jiān)聽器，而不是冒泡階段。這使我們能夠在事件向下傳播到目標元素之前攔截它。

如果組件被標記為 disabled，handleClickCapture 函數(shù)會立即返回，不執(zhí)行任何操作。如果用戶未登錄（通過 isUserLogin 函數(shù)檢查），函數(shù)會調(diào)用 e.stopPropagation() 阻止事件進一步傳播，然后顯示一個模態(tài)框（Modal），提示用戶登錄。

useEffect 的清理函數(shù)確保在組件卸載時移除事件監(jiān)聽器，防止內(nèi)存泄漏。

3.3 組件渲染

return (
    <div
        ref={ref}
        className={className}
        style={style}
        onClick={(e) => {
            if (!disabled && isUserLogin(window.loginInfo && window.loginInfo.userInfo)) {
                onClick && onClick(e);
            }
        }}
    >
        {children}
    </div>
);

在組件的返回語句中，我們將 ref 對象附加到 div 元素上。這樣，之前定義的事件監(jiān)聽器就能夠被正確注冊到這個 div 上。我們還為這個 div 提供了一個 onClick 事件處理函數(shù)。在這個函數(shù)內(nèi)部，如果組件未被禁用并且用戶已登錄，則調(diào)用傳入的 onClick 回調(diào)。這保留了組件原有點擊行為的可能性，但只在用戶滿足特定條件時觸發(fā)。

小結

通過這種方式，就封裝了一個可以在事件的捕獲階段根據(jù)用戶登錄狀態(tài)決定是否允許事件進一步傳播的 React 組件。這種模式不僅增強了應用的安全性，避免了未授權的操作，還提高了用戶體驗，通過模態(tài)框提示需要登錄。這種鑒權組件的封裝展示了 React 以及現(xiàn)代 JavaScript 提供的強大能力，使得開發(fā)高質(zhì)量的 Web 應用更加高效和靈活。

完整組件代碼

import React, { useEffect, useRef } from "react";
import { isUserLogin } from "../lib/common";
import { Modal } from "antd-mobile";
import intl from "react-intl-universal";
import { native_LoginAgain } from "../lib/nativeUtil";

export default function LoginAuth(props) {
    const { disabled, onClick, style, className, children } = props;
    const ref = useRef(null); // 使用 useRef 創(chuàng)建一個 ref 對象

    useEffect(() => {
        // 定義一個在捕獲階段執(zhí)行的 handleClick 函數(shù)
        const handleClickCapture = (e) => {
            if(disabled) return;
            if(!isUserLogin(window.loginInfo && window.loginInfo.userInfo)) {
                e.stopPropagation(); // 阻止事件在捕獲階段繼續(xù)傳播
                Modal.clear();
                Modal.confirm({
                    bodyClassName: "modal-confirm-body",
                    content: intl.get("helptext_login_first"),
                    cancelText: intl.get("text_cancel"),
                    confirmText: intl.get("text_log_in"),
                    onConfirm: () => native_LoginAgain.call()
                });
            }
        };

        // 獲取當前 ref 指向的 DOM 元素
        const currentElement = ref.current;
        // 為該元素添加捕獲階段的事件監(jiān)聽器
        currentElement.addEventListener('click', handleClickCapture, true);

        // 清理函數(shù)：組件卸載時移除事件監(jiān)聽器
        return () => {
            currentElement.removeEventListener('click', handleClickCapture, true);
        };
    }, [disabled]); // 依賴項數(shù)組中的元素會觸發(fā) useEffect 的重新執(zhí)行

    return (
        <div
            ref={ref} // 將 ref 綁定到 div 元素上
            className={className}
            style={style}
            onClick={(e) => {
                // 阻止冒泡階段的處理，如果需要
                if (!disabled && isUserLogin(window.loginInfo && window.loginInfo.userInfo)) {
                    onClick && onClick(e);
                }
            }}
        >
            {children}
        </div>
    );
}

結尾

通過在事件的捕獲階段阻止事件傳播，結合 React 組件的封裝，不僅能夠有效控制應用中的權限邏輯，還能提升用戶體驗和應用安全性。這種技術的應用展示了現(xiàn)代前端開發(fā)中，事件處理機制的強大能力，以及通過合理設計提高應用整體質(zhì)量的可能性。在開發(fā)實踐中靈活運用這一技術，將有助于構建更加穩(wěn)定、安全且用戶友好的 Web 應用。

到此這篇關于詳解如何封裝和使用一個React鑒權組件的文章就介紹到這了,更多相關React鑒權組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: