当前位置：首页 > VUE

vue怎么实现权限

2026-03-29 21:13:57VUE

Vue 权限实现方案

在 Vue 中实现权限控制通常涉及前端路由权限、按钮权限和接口权限三个方面。以下是常见的实现方法：

路由权限控制

通过动态路由实现权限过滤，未授权的路由不加载到系统中。

定义路由表 创建基础路由（如登录页）和动态路由（需权限的路由）。

// router/index.js
const constantRoutes = [
  { path: '/login', component: Login },
  { path: '/404', component: NotFound }
]

const asyncRoutes = [
  { path: '/admin', component: Admin, meta: { roles: ['admin'] } },
  { path: '/user', component: User, meta: { roles: ['user', 'admin'] } }
]

获取用户权限 登录后从后端获取用户角色或权限列表。

// 模拟获取用户角色
const roles = ['admin'] // 实际从接口获取

过滤动态路由 使用 router.addRoutes 添加符合权限的路由。

function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

const accessedRoutes = filterRoutes(asyncRoutes, roles)
router.addRoutes(accessedRoutes)

按钮级权限控制

使用自定义指令或组件控制按钮显示。

自定义指令方式 注册全局指令 v-permission。

// main.js
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = ['admin'] // 从store获取实际权限

    if (value && !roles.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

组件使用方式

<button v-permission="'admin'">管理员按钮</button>

函数式组件方式 创建权限组件包装器。

// components/Permission.vue
export default {
  functional: true,
  props: {
    authority: { type: [String, Array], required: true }
  },
  render(h, context) {
    const { props, scopedSlots } = context
    const roles = ['admin'] // 实际从store获取

    const hasPermission = Array.isArray(props.authority)
      ? roles.some(role => props.authority.includes(role))
      : roles.includes(props.authority)

    return hasPermission ? scopedSlots.default() : null
  }
}

接口权限控制

结合请求拦截器实现接口权限验证。

axios 拦截器配置 在请求头中添加权限令牌。

// utils/request.js
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
})

响应拦截处理 处理权限不足的响应。

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 403) {
      // 跳转到无权限页面或提示
      router.push('/no-permission')
    }
    return Promise.reject(error)
  }
)

数据权限控制

结合 computed 属性或过滤器实现数据过滤。

vue怎么实现权限

// 组件内过滤数据
computed: {
  filteredData() {
    const userRole = this.$store.state.user.role
    return this.rawData.filter(item => 
      !item.requiredRole || item.requiredRole === userRole
    )
  }
}

最佳实践建议

权限数据应存储在 Vuex 中集中管理

路由守卫配合权限验证

router.beforeEach((to, from, next) => {
  if (to.meta.roles) {
    const hasRole = store.getters.roles.some(role => 
      to.meta.roles.includes(role)
    )
    hasRole ? next() : next('/403')
  } else {
    next()
  }
})