柯里化实现前端路由权限拦截的核心是将用户角色、权限标识等参数分步固化，生成可复用、易组合、易测试的守卫函数，并在 Vue Router 的 beforeEnter 或 beforeEach 中调用，兼顾灵活性与安全性。
JavaScript 中用柯里化实现前端路由权限拦截，核心是把“检查权限”这个动作提前固化一部分参数（比如用户角色、白名单），返回一个可复用的中间件函数，再在路由守卫中调用它。它不改变路由逻辑本身，而是让权限判断更灵活、可组合、易测试。
用柯里化封装权限校验逻辑
柯里化把多参数函数拆成一系列单参数函数。权限校验通常依赖：当前用户角色、目标路由所需的权限标识（如 'admin'、'editor'）、以及可选的兜底行为（跳转登录页或 403）。用柯里化可以先固定角色和策略，生成具体守卫函数：
const checkPermission = (userRole) => (requiredRole) => (to, from, next) => {
// 简单角色匹配（也可扩展为数组包含、权限码 & 运算等）
if (userRole === requiredRole || userRole === 'super') {
next();
} else {
next('/403'); // 或 next({ name: 'Login' })
}
};
// 创建具体守卫
const adminGuard = checkPermission('admin')('admin');
const editorGuard = checkPermission('admin')('editor'); // admin 可访问 editor 路由
在 Vue Router 中集成柯里化守卫
Vue Router 的 beforeEach 或单个路由的 meta.requiresAuth + 全局守卫配合使用更自然。推荐将柯里化结果作为路由独享守卫：
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { permission: 'admin' },
beforeEnter: checkPermission('user')('admin') // 当前用户角色传入，动态生成守卫
},
{
path: '/articles',
component: ArticleList,
meta: { permission: 'editor' },
beforeEnter: checkPermission('user')('editor')
}
];
若用户角色需异步获取（如从 store 或 API），可稍作调整：柯里化最后一层接收 userRole，再返回真正的导航守卫：
立即学习“Java免费学习笔记（深入）”；
const createPermissionGuard = (requiredRole) => (userRole) => (to, from, next) => {
if (userRole && (userRole === requiredRole || userRole === 'super')) {
next();
} else {
next('/login');
}
};
// 使用时（例如在 setup 或 store 中）
const userRole = store.state.user.role;
router.beforeEach((to, from, next) => {
if (to.meta.permission) {
createPermissionGuard(to.meta.permission)(userRole)(to, from, next);
} else {
next();
}
});
支持多权限与组合判断（进阶）
真实场景常需“拥有任一权限”或“同时满足多个”，这时可让柯里化返回支持配置的工厂函数：
const createPermissionChecker = (strategy = 'includes') => (userPermissions) => (required) => {
if (strategy === 'includes') {
return required.some(r => userPermissions.includes(r));
}
if (strategy === 'every') {
return required.every(r => userPermissions.includes(r));
}
return false;
};
// 使用
const hasAny = createPermissionChecker('includes')(['admin', 'editor']);
const canAccess = hasAny(['admin', 'editor']); // true
// 绑定到路由守卫
const routeGuard = (userPermissions) => (to, from, next) => {
const required = to.meta.permissions || [];
if (createPermissionChecker('includes')(userPermissions)(required)) {
next();
} else {
next('/403');
}
};
注意事项与边界情况
- 柯里化只是函数式组织方式，权限数据必须真实可靠——前端校验仅用于体验优化，关键权限必须后端验证
- 避免在柯里化链中做异步操作（如 fetch 角色）；应先确保 userRole 就绪，再执行守卫
- 路由元信息（meta）建议统一字段名，如 meta.requiredRoles 或 meta.permissions，便于守卫提取
- 配合动态路由（addRoute）时，可在添加前用柯里化函数预判是否该注册此路由
