vue路由实现权限管理
Vue 路由权限管理实现方案
基于路由守卫的权限控制
通过 router.beforeEach 全局守卫实现权限校验。在路由跳转前检查用户权限，无权限时重定向到登录页或提示页：
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token');
if (to.meta.requiresAuth && !hasToken) {
next('/login');
} else {
next();
}
});路由元信息标记权限
在路由配置中使用 meta 字段定义权限标识：
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
}
];动态路由加载方案
根据用户权限动态生成路由表，通常在后端返回权限数据后调用 router.addRoutes：
// 假设后端返回用户可访问路由
const asyncRoutes = fetchUserRoutes().then(routes => {
router.addRoutes(routes);
});权限指令辅助控制
创建自定义指令控制页面元素的显隐：
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
// 使用方式: <button v-permission="'create_user'">创建用户</button>角色-权限映射方案
建立角色与权限的映射关系，通过用户角色过滤路由：
function filterRoutes(routes, userRole) {
return routes.filter(route => {
return !route.meta?.roles || route.meta.roles.includes(userRole);
});
}常见优化实践
路由按需加载
结合动态导入实现路由懒加载，提升初始加载速度：
const Admin = () => import('./views/Admin.vue');权限缓存策略
避免频繁校验权限，可将权限信息存入 Vuex 或 Pinia 状态管理库。
404路由处理
未匹配路由应重定向到404页面，需确保动态路由添加后更新404路由：
router.addRoutes([...asyncRoutes, { path: '*', redirect: '/404' }]);注意事项
- 敏感路由需在后端二次校验
- 动态路由场景需考虑路由刷新丢失问题
- 权限变更时应同步更新客户端路由状态
- 生产环境建议结合 JWT 等鉴权方案
