React?組件權(quán)限控制的實(shí)現(xiàn)

更新時(shí)間：2022年02月14日 08:31:52 作者：Pwcong

本文主要介紹了React?組件權(quán)限控制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前話

具備用戶體系的業(yè)務(wù)系統(tǒng)往往需要具備權(quán)限控制的能力。前后不分離的開發(fā)模式權(quán)限控制主要由后端結(jié)合模版引擎實(shí)現(xiàn)，而前后分離的開發(fā)模式由前后兩端協(xié)商權(quán)限配置分別進(jìn)行數(shù)據(jù)權(quán)限控制和組件權(quán)限控制。

正文

權(quán)限配置格式不限，為進(jìn)行后續(xù)演示本篇設(shè)定權(quán)限配置如下：

export type IAuthConfig = {
? /** 權(quán)限標(biāo)識列表 */
? keys: string[];
};

且提供一個(gè)Hook直接獲取當(dāng)前用戶信息：

export type IUser = {
? /** 權(quán)限配置 */
? authConfig: IAuthConfig;
};

/** 用戶信息Hook */
export function useUser() {
? // ...略
? return user;
}

首先我們先定義一個(gè)權(quán)限Hook，內(nèi)容如下：

/**
?* 轉(zhuǎn)換為權(quán)限標(biāo)識數(shù)組
?* @param auth 權(quán)限標(biāo)識
?* @returns
?*/
function getAuthKeys(auth: string | string[]) {
? return Array.isArray(auth) ? auth : [auth];
}

/** 權(quán)限鑒權(quán)類型 */
export enum EAuthType {
? /** 或權(quán)限（至少匹配一個(gè)） */
? "some" = "some",
? /** 與權(quán)限（全部匹配） */
? "every" = "every",
}

/** 權(quán)限Hook */
export function useAuth() {
? const { authConfig } = useUser();

? // 權(quán)限標(biāo)識列表
? const authKeys = useMemo(() => authConfig?.keys ?? [], [authConfig]);
? // 校驗(yàn)是否具備權(quán)限
? const hasAuth = useCallback(
? ? (auth: string | string[], type?: EAuthType) =>
? ? ? getAuthKeys(auth)[type ?? EAuthType.every]((key) =>
? ? ? ? authKeys.includes(key)
? ? ? ),
? ? [authKeys]
? );

? const ret: [typeof authKeys, typeof hasAuth] = [authKeys, hasAuth];
? return ret;
}

1. 控制方式

對于前端開發(fā)而言一般只需做組件控制，控制方式有很多種寫法。

1.1 直接計(jì)算

const Cmpt: React.FC = () => {
? const [, hasAuth] = useAuth();
? // 計(jì)算是否有權(quán)限
? const authorized = useMemo(() => hasAuth("test"), [hasAuth]);

? // ...略
};

1.2 通用權(quán)限Hoc

export function withAuth<P extends Record<string, unknown> = {}>(
? auth: string | string[],
? type?: EAuthType
) {
? return function (Component: any) {
? ? const WrappedComponent: React.FC<P> = (props) => {
? ? ? const [, hasAuth] = useAuth();

? ? ? const instance = React.createElement(Component, {
? ? ? ? ...props,
? ? ? });

? ? ? // 計(jì)算是否有權(quán)限
? ? ? const authorized = hasAuth(auth, type);

? ? ? // ...略
? ? };

? ? WrappedComponent.displayName = `withAuth(${getDisplayName(Component)})`;

? ? return WrappedComponent;
? };
}

1.3 權(quán)限包裹組件

const AuthWrapper: React.FC<IProps> = ({ auth, type, children }) => {
? const [, hasAuth] = useAuth();
? // 計(jì)算是否有權(quán)限
? const authorized = useMemo(() => hasAuth(auth, type), [auth, type, hasAuth]);

? // ...略
};

2. 控制結(jié)果

常見控制結(jié)果為控制組件的顯示或隱藏，或根據(jù)是否具備權(quán)限做組件的自定義渲染。

為方便演示后面統(tǒng)一使用權(quán)限包裹組件進(jìn)行說明。

2.1 顯隱控制

具備權(quán)限的組件直接渲染，否則返回null，即可實(shí)現(xiàn)顯隱控制。權(quán)限包裹組件實(shí)現(xiàn)如下：

const AuthWrapper: React.FC<IProps> = ({ auth, type, children }) => {
? const [, hasAuth] = useAuth();
? // 計(jì)算是否有權(quán)限
? const authorized = useMemo(() => hasAuth(auth, type), [auth, type, hasAuth]);
? // 具備權(quán)限的組件直接渲染，否則返回null
? return authorized ? children : null;
};

在需要權(quán)限控制的組件外包裹權(quán)限組件即可。

const Cmpt: React.FC = () => {
? <>
? ? <AuthWrapper auth="test">
? ? ? <Button>Hello World</Button>
? ? </AuthWrapper>
? </>;
};

2.2 自定義渲染

實(shí)際業(yè)務(wù)場景中，存在需要提醒用戶沒有權(quán)限的情況，這時(shí)需要權(quán)限包裹組件支持自定義渲染，實(shí)現(xiàn)方式有多種：

靜態(tài)props注入
動(dòng)態(tài)props映射
render props

相比較之下render props更為自由，權(quán)限包裹組件完善后實(shí)現(xiàn)如下：

type IProps = {
? /** 權(quán)限標(biāo)識 */
? auth: string | string[];
? /** 鑒權(quán)類型 */
? type?: EAuthType;
? /** 子內(nèi)容 */
};

const AuthWrapper: React.FC<IProps> = ({ auth, type, children }) => {
? const [, hasAuth] = useAuth();
? // 計(jì)算是否有權(quán)限
? const authorized = useMemo(() => hasAuth(auth, type), [auth, type, hasAuth]);

? // 自定義渲染
? if (typeof children === "function") {
? ? return children(authorized);
? }

? // 顯隱控制
? return authorized ? children : null;
};

這時(shí)就可以渲染提示無權(quán)限組件：

const Cmpt: React.FC = () => {
? <>
? ? <AuthWrapper auth="test">
? ? ? {(authorized) => <Button disabled={!authorized}>Hello World</Button>}
? ? </AuthWrapper>
? </>;
};

3. 權(quán)限數(shù)據(jù)

前端開發(fā)做組件控制的顆粒度取決于權(quán)限數(shù)據(jù)的類型，權(quán)限數(shù)據(jù)類型分為靜態(tài)權(quán)限和動(dòng)態(tài)權(quán)限。
其中靜態(tài)權(quán)限一般在完成登錄認(rèn)證后即可一次性獲取，而動(dòng)態(tài)權(quán)限則在操作數(shù)據(jù)時(shí)進(jìn)行權(quán)限校驗(yàn)。
因此不難發(fā)現(xiàn)靜態(tài)權(quán)限往往用于控制路由、頁面或者粗糙的操作權(quán)限。而動(dòng)態(tài)權(quán)限則能夠?qū)?dòng)態(tài)數(shù)據(jù)進(jìn)行更細(xì)粒度的操作權(quán)限控制（需后端數(shù)據(jù)權(quán)限控制能力配合）。

3.1 靜態(tài)權(quán)限

如前面描述，登錄認(rèn)證后即可從用戶信息中得到權(quán)限標(biāo)識，同樣前面的栗子均也為靜態(tài)權(quán)限示例。

3.2 動(dòng)態(tài)權(quán)限

需要?jiǎng)討B(tài)權(quán)限校驗(yàn)的場景在業(yè)務(wù)系統(tǒng)中也較為常見，例如用戶能夠看到列表數(shù)據(jù)，但禁止查閱無權(quán)限的數(shù)據(jù)詳情。
由此可知對于用戶而言，獲取的動(dòng)態(tài)的列表數(shù)據(jù)需要逐一進(jìn)行權(quán)限校驗(yàn)，這時(shí)我們對權(quán)限Hook和包裹組件進(jìn)行改造，改造后代碼如下：

type IAuthDynamicConfig = {
? // ...略
};

/** 權(quán)限Hook */
export function useAuth() {
? // ...略

? // 動(dòng)態(tài)校驗(yàn)是否具有權(quán)限
? const dynamicAuth = useCallback(
? ? (auth: string | string[], type?: EAuthType, config?: IAuthDynamicConfig) =>
? ? ? // 批量異步校驗(yàn)權(quán)限，實(shí)現(xiàn)略
? ? ? append2DynamicAuthTask(auth, type, config),
? ? []
? );

? const ret: [typeof authKeys, typeof hasAuth, typeof dynamicAuth] = [
? ? authKeys,
? ? hasAuth,
? ? dynamicAuth,
? ];
? return ret;
}

/** 權(quán)限包裹組件 */
const AuthWrapper: React.FC<IProps> = ({ auth, type, config, children }) => {
? const [, hasAuth, dynamicAuth] = useAuth();

? const [authorized, setAuthorized] = useState(false);

? // 計(jì)算是否有權(quán)限
? useEffect(() => {
? ? if (config === undefined) {
? ? ? setAuthorized(hasAuth(auth, type));
? ? ? return;
? ? }
? ? dynamicAuth(auth, type, config).then(setAuthorized);
? }, [auth, type, config, hasAuth, dynamicAuth]);

? // ...略
};

使用方式如下：

const Cmpt: React.FC = () => {
? // ...略

? <>
? ? {data.map((item) => (
? ? ? <div key={item.id}>
? ? ? ? <div>{item.title}</div>
? ? ? ? <div>
? ? ? ? ? <AuthWrapper
? ? ? ? ? ? auth="detail"
? ? ? ? ? ? config={{
? ? ? ? ? ? ? module: "demo",
? ? ? ? ? ? ? identify: item.id,
? ? ? ? ? ? }}
? ? ? ? ? >
? ? ? ? ? ? {(authorized) => (
? ? ? ? ? ? ? <Button disabled={!authorized} onClick={handleDetail}>
? ? ? ? ? ? ? ? 詳情
? ? ? ? ? ? ? </Button>
? ? ? ? ? ? )}
? ? ? ? ? </AuthWrapper>
? ? ? ? </div>
? ? ? </div>
? ? ))}
? </>;
};

到此這篇關(guān)于React 組件權(quán)限控制的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React 組件權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: