答案：前端权限路由通过动态过滤路由表和路由守卫实现，根据用户角色生成可访问路由并拦截非法跳转。具体包括定义带meta字段的路由结构、登录后获取用户角色、使用filterRoutes过滤出可访问路径，并在路由跳转时通过beforeEach等守卫校验权限，防止未授权访问；最终将合法路由注入前端路由系统完成渲染。
前端权限路由控制是现代单页应用中常见的需求，尤其在管理系统中，不同角色看到的菜单和能访问的页面各不相同。JavaScript 结合主流框架（如 Vue、React）可以灵活实现这一功能。以下是基于原生 JS 思路与通用逻辑，帮助你理解如何用 JS 实现前端权限路由控制。
权限路由的基本思路
权限路由的核心是根据用户登录后的角色或权限标识，动态生成可访问的路由表，并渲染对应菜单与页面。关键点包括：
- 静态路由：所有页面路径的配置，包含是否需要权限、所需角色等元信息
- 用户权限数据：登录后从后端获取用户角色或权限码
- 动态过滤路由：通过 JS 过滤出当前用户可访问的路由
- 拦截非法访问：通过路由守卫防止用户手动输入 URL 跳转到无权页面
定义带权限的路由结构
使用 JS 定义一个包含 meta 字段的路由表，用于描述权限要求：
const routes = [
{
path: '/home',
component: Home,
meta: { requiresAuth: true, roles: ['admin', 'user'] }
},
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
},
{
path: '/login',
component: Login,
meta: { requiresAuth: false }
}
];
其中 meta.roles 表示访问该路由所需的角色，requiresAuth 表示是否需要登录。
立即学习“Java免费学习笔记（深入）”；
动态生成用户可访问的路由
用户登录后，获取其角色（如从 token 解析或接口返回），然后通过递归过滤路由表：
function filterRoutes(routes, userRoles) {
return routes.filter(route => {
if (route.meta?.requiresAuth === false) return true;
if (!route.meta?.roles) return false;
return route.meta.roles.some(role => userRoles.includes(role));
});
}
// 使用示例
const userRoles = ['admin'];
const accessibleRoutes = filterRoutes(routes, userRoles);
// accessibleRoutes 包含 /home 和 /admin
之后可将 accessibleRoutes 注入到前端路由系统中（如 Vue Router 的 addRoute，React Router 动态渲染）。
路由跳转时的权限校验
即使隐藏了菜单，用户仍可能通过地址栏直接访问。因此每次路由切换前都应做权限检查：
- 在 Vue 中使用 beforeEach 路由守卫
- 在 React 中可通过高阶组件或 useNavigate + useEffect 拦截
- 纯 JS 场景可监听 popstate 或封装导航函数
示例（类 Vue Router 守卫逻辑）：
function beforeEach(to, from, next) {
const userRoles = JSON.parse(localStorage.getItem('user'))?.roles || [];
if (to.meta?.requiresAuth) {
if (!userRoles.length) return next('/login');
const hasPermission = to.meta.roles?.some(role => userRoles.includes(role));
if (!hasPermission) return next('/403');
}
next();
}
调用 beforeEach 判断是否放行，否则跳转至登录或无权限页面。
基本上就这些。核心是用 JS 对路由进行数据建模、动态过滤和运行时校验。只要设计好权限字段和校验逻辑，就能实现灵活的前端权限控制。注意：前端控制不可替代后端鉴权，仅用于体验优化与界面展示。
