vue权限路由实现跳转
路由权限控制实现
在Vue项目中实现路由权限控制通常需要结合路由守卫和用户角色/权限信息。以下是几种常见的实现方式：
基于路由元信息的守卫
通过meta字段定义路由所需的权限，在全局前置守卫中进行验证：
// router.js
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
}
]
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles // 从Vuex获取用户角色
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!userRoles) {
next('/login')
} else if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/403') // 无权限页面
} else {
next()
}
} else {
next()
}
})动态路由添加
根据用户权限动态生成可访问的路由表：
// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
} else {
return true
}
})
}
// 用户登录后动态添加路由
store.dispatch('GenerateRoutes', roles).then(accessRoutes => {
router.addRoutes(accessRoutes)
})按钮级权限控制
对于页面内的按钮权限，可以创建自定义指令：
// main.js
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const roles = store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const hasPermission = roles.some(role => value.includes(role))
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error('需要指定权限数组')
}
}
})
// 使用方式
<button v-permission="['admin']">管理员按钮</button>服务端返回权限路由
更安全的做法是由服务端返回用户可访问的路由结构：
// 获取服务端返回的路由配置
api.getRoutes().then(res => {
const routes = formatRoutes(res.data) // 格式化路由
router.addRoutes(routes)
})
function formatRoutes(routes) {
return routes.map(route => {
return {
path: route.path,
component: () => import(`@/views/${route.component}`),
children: route.children ? formatRoutes(route.children) : []
}
})
}404页面处理
动态路由添加后需要处理404页面的匹配：
// 确保404路由是最后添加的
router.addRoutes([
...filteredRoutes,
{ path: '*', redirect: '/404', hidden: true }
])以上方法可以单独使用，也可以组合使用以实现更完善的权限控制方案。具体选择取决于项目复杂度和安全要求。
