当前位置：首页 > VUE

vue 实现权限

2026-03-27 09:31:09VUE

Vue 权限控制实现方法

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

路由权限控制

通过动态路由实现权限过滤，在用户登录后根据角色或权限列表生成可访问的路由表：

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

const router = new VueRouter({
  routes
})

// 动态添加路由
function addRoutes(permissions) {
  const allowedRoutes = filterAsyncRoutes(permissions)
  router.addRoutes(allowedRoutes)
}

// 示例过滤函数
function filterAsyncRoutes(permissions) {
  return permissions.map(permission => {
    return {
      path: permission.path,
      component: () => import(`@/views/${permission.component}`),
      children: permission.children ? filterAsyncRoutes(permission.children) : []
    }
  })
}

按钮权限控制

使用自定义指令或组件封装权限判断逻辑：

// directives/permission.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:add'">添加用户</button>

接口权限控制

在请求拦截器中校验权限：

// utils/request.js
axios.interceptors.request.use(config => {
  const token = store.getters.token
  const permission = config.permission

  if (permission && !hasPermission(permission)) {
    return Promise.reject(new Error('无访问权限'))
  }

  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }

  return config
})

权限数据存储

使用 Vuex 管理权限状态：

// store/modules/permission.js
export default {
  state: {
    routes: [],
    addRoutes: [],
    permissions: []
  },
  mutations: {
    SET_ROUTES(state, routes) {
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes)
    },
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  },
  actions: {
    generateRoutes({ commit }, permissions) {
      return new Promise(resolve => {
        const accessedRoutes = filterAsyncRoutes(permissions)
        commit('SET_ROUTES', accessedRoutes)
        commit('SET_PERMISSIONS', permissions)
        resolve(accessedRoutes)
      })
    }
  }
}

权限验证流程

用户登录成功后获取权限数据并初始化路由：

// 登录成功后
store.dispatch('user/login', userInfo).then(() => {
  store.dispatch('permission/generateRoutes', roles).then(accessRoutes => {
    router.addRoutes(accessRoutes)
    next({ ...to, replace: true })
  })
})

全局权限守卫

在路由全局守卫中校验权限：

vue 实现权限

router.beforeEach((to, from, next) => {
  if (store.getters.token) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.permissions.length === 0) {
        store.dispatch('permission/generateRoutes', roles).then(() => {
          next({ ...to, replace: true })
        })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})

以上方法可根据实际项目需求进行组合或调整，实现完整的权限控制体系。