当前位置：首页 > VUE

vue route实现权限控制

2026-01-20 06:31:58VUE

Vue Router 权限控制实现方法

路由元信息（meta）结合导航守卫

在路由配置中通过 meta 字段标记权限要求，例如需要登录或特定角色：

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: { requiresAuth: true, roles: ['admin'] }
  }
]

使用全局前置守卫 beforeEach 进行拦截：

vue route实现权限控制

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)
}

组件级权限控制

在组件内部进行细粒度权限检查：

vue route实现权限控制

<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('无操作权限')
    }
  }
}