当前位置：首页 > VUE

vue实现权限

2026-01-14 00:31:04VUE

Vue 权限实现方案

权限控制在 Vue 项目中通常分为前端路由权限和页面元素权限两部分。以下是常见的实现方式：

路由权限控制

通过路由守卫实现页面访问权限，未授权用户无法访问特定路由。

// router.js
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !hasToken) {
    next('/login')
  } else {
    next()
  }
})

动态路由添加

根据用户权限动态生成可访问路由表，通常在后端返回权限数据后处理。

// 假设后端返回的权限数据格式
const asyncRoutes = [
  {
    path: '/admin',
    component: Layout,
    meta: { role: 'admin' }
  }
]

// 过滤路由
function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.role) {
      return roles.includes(route.meta.role)
    }
    return true
  })
}

// 添加路由
const accessedRoutes = filterRoutes(asyncRoutes, ['admin'])
router.addRoutes(accessedRoutes)

指令式权限控制

创建自定义指令控制页面元素的显示/隐藏。

// main.js
Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const permissions = store.getters.permissions

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

// 使用方式
<button v-permission="'user:create'">创建用户</button>

权限数据存储

使用 Vuex 集中管理权限状态，确保全局访问。

// store/modules/permission.js
const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

按钮级权限

通过混入(mixin)或工具函数实现按钮级别的权限判断。

// utils/permission.js
export function checkPermission(permission) {
  const permissions = store.getters.permissions
  return permissions.includes(permission)
}

// 组件中使用
import { checkPermission } from '@/utils/permission'

export default {
  methods: {
    handleEdit() {
      if (!checkPermission('user:edit')) {
        this.$message.error('无权限操作')
        return
      }
      // 业务逻辑
    }
  }
}

权限数据初始化

在用户登录后获取权限数据并初始化。

// 登录成功后
login().then(res => {
  const { token, permissions } = res.data
  localStorage.setItem('token', token)
  store.dispatch('GenerateRoutes', permissions)
})

以上方案可根据项目需求组合使用，建议将权限逻辑封装为独立模块便于维护。对于复杂系统，可考虑结合后端返回的权限树实现更精细的控制。

vue实现权限