当前位置：首页 > VUE

vue实现权限管理页面

2026-01-21 07:06:09VUE

权限管理页面实现方案

在Vue中实现权限管理页面通常涉及路由控制、动态菜单渲染和按钮级权限控制。以下是具体实现方法：

路由权限控制

通过路由守卫和动态路由实现页面访问权限控制：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'

Vue.use(Router)

const createRouter = () => new Router({
  routes: constantRoutes // 基础路由
})

const router = createRouter()

router.beforeEach((to, from, next) => {
  if (store.getters.token) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.roles.length === 0) {
        store.dispatch('GetUserInfo').then(res => {
          const roles = res.roles
          store.dispatch('GenerateRoutes', roles).then(() => {
            router.addRoutes(store.getters.addRouters)
            next({ ...to, replace: true })
          })
        })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})

动态菜单生成

基于权限数据动态生成侧边栏菜单：

// store/modules/permission.js
function filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}

按钮级权限控制

使用自定义指令实现按钮权限控制：

// main.js
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 permissionRoles = value
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定权限数组，如v-permission="['admin']"`)
    }
  }
})

权限数据管理

在Vuex中管理权限状态：

// store/modules/user.js
const actions = {
  login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
        commit('SET_ROLES', data.roles)
        commit('SET_NAME', data.name)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

页面元素控制

在模板中使用权限控制：

<template>
  <div>
    <el-button v-permission="['admin']">管理员按钮</el-button>
    <el-button v-permission="['editor']">编辑按钮</el-button>
  </div>
</template>

权限接口设计

后端API应返回用户权限数据：

{
  "roles": ["admin"],
  "name": "管理员",
  "routes": [
    {
      "path": "/dashboard",
      "name": "Dashboard",
      "meta": { "title": "仪表盘", "icon": "dashboard" }
    }
  ]
}

错误处理

实现权限错误处理机制：

// utils/request.js
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      if (res.code === 50008 || res.code === 50012) {
        MessageBox.confirm('登录状态已过期', '重新登录', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }
)

以上方案实现了完整的Vue权限管理系统，包括路由控制、菜单生成、按钮权限和错误处理等关键功能。

vue实现权限管理页面