当前位置：首页 > VUE

vue实现权限

2026-01-08 03:43:13VUE

Vue 实现权限管理的方法

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

路由权限控制

通过动态路由的方式，根据用户权限加载不同的路由配置。可以使用 Vue Router 的 addRoutes 方法动态添加路由。

// 在路由守卫中动态添加路由
router.beforeEach((to, from, next) => {
  if (hasToken()) {
    if (to.path === '/login') {
      next('/')
    } else {
      if (!hasRoles()) {
        getRoles().then(roles => {
          const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
          router.addRoutes(accessedRoutes)
          next({ ...to, replace: true })
        })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})

按钮级权限控制

通过自定义指令或函数来控制按钮的显示与隐藏。可以使用 v-permission 指令来实现。

// 注册全局指令
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.getters && store.getters.roles
    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = roles.some(role => value.includes(role))
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('需要指定权限数组')
    }
  }
})

接口权限控制

在请求拦截器中校验用户权限，无权限的请求直接拦截。

axios.interceptors.request.use(config => {
  const token = store.getters.token
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    MessageBox.confirm('登录已过期，请重新登录', '提示', {
      confirmButtonText: '重新登录',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      store.dispatch('user/resetToken').then(() => {
        location.reload()
      })
    })
  }
  return Promise.reject(error)
})

权限数据管理

使用 Vuex 管理权限数据，包括用户角色、权限列表等。

const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
    }
  },
  actions: {
    getRoles({ commit }) {
      return new Promise((resolve, reject) => {
        getRoles().then(response => {
          const { data } = response
          commit('SET_ROLES', data.roles)
          commit('SET_PERMISSIONS', data.permissions)
          resolve(data)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
})

以上方法可以组合使用，根据项目需求选择合适的权限管理方案。动态路由控制页面访问权限，指令控制按钮权限，接口拦截控制数据权限，Vuex 管理权限数据。

vue实现权限