权限透传器是通过高阶函数利用闭包固化用户身份、柯里化自动注入上下文的函数式鉴权机制，不依赖React Context或响应式系统，适用于API调用、事件处理等非渲染逻辑。
用高阶函数实现的“权限透传器”，本质是把用户身份（如角色、权限列表、token 等）作为上下文，不依赖 props 逐层手动传递，而是在调用链中自动注入并可被任意深层组件消费。它不是靠 React Context 或 Vue provide/inject 的响应式机制，而是靠函数执行时的闭包捕获 + 参数代理完成“静默透传”。
核心思路：用闭包固化身份，用柯里化延展调用
权限透传器不是一个组件，而是一个生成函数的函数。它接收当前用户身份，返回一个“带身份能力”的新函数，该函数在被调用时，自动将身份信息附带进参数或上下文，供内部逻辑使用。
- 用户身份在应用启动或登录后一次性获取，作为透传器的初始输入
- 透传器本身不订阅状态变化，适合静态权限或低频刷新场景
- 它天然兼容函数式组件、事件处理器、API 调用封装等非渲染逻辑
典型实现：withAuth 高阶函数
以下是一个轻量、无框架依赖的 JavaScript 示例：
const withAuth = (user) => {
// 返回一个能“记住” user 的函数工厂
return (fn) => (...args) => {
// 自动把 user 注入到 fn 第一个参数，或作为隐式上下文
return fn({ user }, ...args);
};
};
// 使用示例：封装一个需要鉴权的 API 调用
const fetchUserReport = (ctx, userId) => {
if (!ctx.user?.roles?.includes('admin')) {
throw new Error('无访问报表权限');
}
return fetch(`/api/reports/${userId}`);
};
const authFetchUserReport = withAuth({ roles: ['admin'] })(fetchUserReport);
// 在任意深层组件中直接调用，无需传 user
authFetchUserReport('u123'); // ✅ 自动带上 { user }
如何让深层组件“感知”身份而不显式传参
真正实现“自动获取”，关键在于统一入口和约定调用方式：
- 所有需鉴权的业务函数（如按钮点击处理、数据加载、表单提交）都经由同一透传器包装
- 组件内不直接调用原始函数，而是调用包装后的版本（可挂载在工具对象或模块导出上）
- 若需在 JSX 中做条件渲染（如是否显示删除按钮），可额外提供一个 useAuth 工具函数，从闭包中读取当前 user（注意：这不是 React Hook，只是普通函数）
// 模块级透传器实例（单例）
let currentUser = null;
export const setAuthUser = (user) => { currentUser = user; };
export const useAuth = () => currentUser;
// 组件中
function UserCard({ id }) {
const user = useAuth();
return (
<div>
<h3>{id}</h3>
{user?.permissions?.includes('delete:user') && (
<button onClick={() => handleDelete(id)}>删除</button>
)}
</div>
);
}
与 Context / 状态管理的分工建议
权限透传器不替代状态管理，而是补足其“调用侧”能力：
- Context / Zustand / Pinia：负责身份的存储、更新、跨组件响应式通知（如登出后自动隐藏菜单）
- 权限透传器：负责在函数调用链中稳定、不可篡改地携带身份，尤其适合异步操作、事件回调、工具方法等非渲染路径
- 二者可共存——Context 提供实时视图，透传器提供可靠执行上下文
