vue route实现权限控制
Vue Router 权限控制实现方法
路由元信息（meta）结合导航守卫
在路由配置中通过 meta 字段标记权限要求，例如需要登录或特定角色：
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
}
]使用全局前置守卫 beforeEach 进行拦截：
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth() // 验证登录状态
const userRoles = getUserRoles() // 获取用户角色
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
}
else if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/403') // 无权限页面
}
else {
next()
}
})动态路由加载
根据用户权限动态生成可访问路由表，适用于权限体系复杂场景：
// 用户登录后动态添加路由
function generateRoutes(userRoles) {
const accessibleRoutes = allRoutes.filter(route => {
return !route.meta?.roles || route.meta.roles.some(r => userRoles.includes(r))
})
router.addRoutes(accessibleRoutes)
}组件级权限控制
在组件内部进行细粒度权限检查：
<template>
<button v-if="hasPermission('create')">新建</button>
</template>
<script>
export default {
methods: {
hasPermission(permission) {
return this.$store.state.user.permissions.includes(permission)
}
}
}
</script>指令式权限控制
创建自定义指令实现元素级权限控制：
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})
// 使用方式
<button v-permission="'delete'">删除</button>服务端权限验证
重要操作需通过服务端二次验证：
async function deleteItem(id) {
try {
await api.post('/delete', { id }, {
headers: { 'Authorization': getToken() }
})
} catch (error) {
if (error.response.status === 403) {
showError('无操作权限')
}
}
}注意事项
- 前端权限控制属于用户体验优化，必须配合后端验证
- 敏感路由应设置404重定向，避免暴露未授权路由地址
- 使用路由懒加载时注意动态导入的权限一致性
- 用户权限变更后需要刷新路由或重新登录获取最新权限
