vue实现权限路由
Vue 权限路由实现方法
基于路由元信息（meta）和全局前置守卫
在路由配置中通过 meta 字段标记权限标识，结合 router.beforeEach 实现动态拦截：
// router.js
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
},
{
path: '/user',
component: UserDashboard,
meta: { requiresAuth: true, roles: ['user', 'admin'] }
}
]
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles // 假设从Vuex获取用户角色
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
if (requiresAuth && !userRoles) {
next('/login')
} else if (requiresAuth && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/403') // 无权限页面
} else {
next()
}
})动态路由加载方案
通过后端返回权限数据动态生成路由表，适用于权限系统复杂场景：
// 异步获取权限路由
async function initRoutes() {
const userPermissions = await fetchUserPermissions()
const dynamicRoutes = generateRoutes(userPermissions)
router.addRoutes(dynamicRoutes)
}
function generateRoutes(permissions) {
return permissions.map(perm => ({
path: perm.path,
component: () => import(`@/views/${perm.component}.vue`),
meta: { title: perm.title }
}))
}组件级权限控制
结合自定义指令实现按钮/组件级别的权限控制：
// main.js
Vue.directive('permission', {
inserted(el, binding, vnode) {
const userPermissions = vnode.context.$store.getters.permissions
if (!userPermissions.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
})
// 组件中使用
<button v-permission="'user:delete'">删除用户</button>路由菜单生成策略
基于权限数据动态渲染导航菜单：
computed: {
menuItems() {
return this.$router.options.routes.filter(route => {
return route.meta && this.hasPermission(route.meta.roles)
})
}
},
methods: {
hasPermission(requiredRoles) {
const userRoles = this.$store.getters.roles
return requiredRoles ? requiredRoles.some(role => userRoles.includes(role)) : true
}
}404路由处理
添加通配符路由作为兜底方案，需放在路由配置最后：
{
path: '*',
redirect: '/404',
meta: { hidden: true }
}实现时需注意：
- 权限数据应持久化（如存储在Vuex或本地存储）
- 动态路由添加后需处理页面刷新问题
- 敏感路由建议在后端进行二次校验
- 路由懒加载可优化性能
