当前位置：首页 > VUE

vue实现权限控制

2026-01-17 12:05:37VUE

路由级权限控制

使用Vue Router的beforeEach钩子实现路由拦截，结合用户角色或权限标识进行验证：

// 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 if (to.path === '/login' && hasToken) {
    next('/dashboard')
  } else {
    next()
  }
})

组件级权限控制

通过自定义指令v-permission实现按钮/组件级别的权限控制：

// main.js
Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    const userPermissions = vnode.context.$store.state.user.permissions
    if (!userPermissions.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 组件中使用
<button v-permission="'user:delete'">删除用户</button>

动态菜单生成

根据用户权限动态生成可访问的路由菜单：

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

// 添加动态路由
store.dispatch('GenerateRoutes', roles).then(accessRoutes => {
  router.addRoutes(accessRoutes)
})

API请求拦截

在axios拦截器中验证请求权限：

// http.js
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

权限数据存储

使用Vuex管理权限状态：

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

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

权限验证工具函数

创建可复用的权限校验方法：

// utils/permission.js
export function checkPermission(permissions, permission) {
  return permissions.includes(permission)
}

export function checkRole(roles, role) {
  return roles.includes(role)
}

服务端权限验证

确保后端接口进行二次权限验证：

// Node.js示例
router.delete('/users/:id', authMiddleware, (req, res) => {
  if (!req.user.permissions.includes('user:delete')) {
    return res.status(403).json({ message: '无权操作' })
  }
  // 业务逻辑
})

vue实现权限控制