JavaScript动态导入需前置权限校验，仅授权后才调用import()；结合React Router可实现路由级权限懒加载；支持按角色预拆bundle；须捕获权限拒绝、加载失败及网络异常三类错误。
JavaScript 动态导入（import()）本身不处理权限逻辑，但可以和权限校验结合，实现“有权限才加载、无权限跳过或报错”。关键在于把权限判断放在 import() 调用之前，而不是让它盲目加载。
权限检查必须前置
不能先 import 再判断权限，否则模块已执行（可能触发副作用、API 请求、UI 渲染），失去控制意义。正确流程是：
- 获取当前用户权限（如从 store、token 解析、或 API 获取）
- 根据路由、按钮、功能点等上下文，查该资源是否在权限列表中
- 仅当通过校验时，才调用
import('./admin-dashboard.js') - 未通过时可返回空组件、重定向、或抛出受限提示
配合路由实现权限级懒加载（React 示例）
以 React Router v6 为例，在 element 中动态决定是否渲染受控模块：
const ProtectedRoute = ({ children, requiredPermission }) => {
const permissions = useUserPermissions(); // 如 ['user:read', 'admin:write']
if (!permissions.includes(requiredPermission)) {
return <Navigate to="/403" replace />;
}
return children;
};
// 路由配置
{
path: '/admin',
element: (
<ProtectedRoute requiredPermission="admin:access">
<AsyncComponent loader={() => import('./pages/AdminPage')} />
</ProtectedRoute>
)
}
注：AsyncComponent 是个封装了 React.lazy + Suspense 的高阶组件，内部只在挂载时调用 loader() —— 此时权限已确认。
立即学习“Java免费学习笔记（深入）”；
按角色预拆分 bundle，减少运行时判断
如果权限粒度较粗（如 “admin”、“editor”、“viewer”），可在构建时就分离代码：
- Webpack：用
import(`./features/${role}/dashboard.js`)，配合webpackMode: "lazy"和合理chunkFilename - Vite：支持类似语法，且自动做 code-splitting；注意确保路径是静态可分析的（避免完全动态字符串）
- 最终生成
admin-dashboard.xxxx.js、editor-tools.xxxx.js等独立 chunk，按需拉取，不混杂无关逻辑
错误处理与用户体验补全
权限拒绝 ≠ 加载失败，但网络异常、模块不存在等情况仍需捕获：
const loadWithPermission = async (modulePath, permission) => {
if (!hasPermission(permission)) {
throw new Error('Insufficient permission');
}
try {
return await import(modulePath);
} catch (err) {
if (err.name === 'ChunkLoadError') {
// 可能是版本更新导致旧 chunk 失效，触发刷新或降级
window.location.reload();
}
throw err;
}
};
调用时搭配 try/catch 或 .catch()，统一处理加载失败、权限不足、网络错误三类场景，避免白屏或静默失败。
