vue权限控制实现

vue权限控制实现方法

路由权限控制

通过路由守卫进行权限验证，在路由配置中添加meta字段标记权限标识。

// router.js
const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, roles: ['admin'] }
  }
]

router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  const userRoles = getUserRoles() // 获取用户角色

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!hasToken) {
      next('/login')
    } else if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
      next('/403') // 无权限页面
    } else {
      next()
    }
  } else {
    next()
  }
})

按钮级权限控制

使用自定义指令v-permission控制按钮显示。

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

// 组件中使用
<button v-permission="'user:add'">添加用户</button>

动态菜单生成

根据用户权限过滤路由生成菜单。

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

API请求拦截

在axios拦截器中添加权限验证。

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token
  }
  return config
}, error => {
  return Promise.reject(error)
})

状态管理集成

使用Vuex集中管理权限状态。

// store.js
const store = new Vuex.Store({
  state: {
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  },
  actions: {
    async getPermissions({ commit }) {
      const res = await api.getPermissions()
      commit('SET_PERMISSIONS', res.data)
    }
  }
})

权限数据格式

建议的权限数据结构。

{
  "roles": ["admin", "editor"],
  "permissions": [
    "user:add",
    "user:edit",
    "article:delete"
  ]
}

实现时需要注意权限数据应通过后端返回，前端仅做展示和控制，实际权限验证应在后端完成。权限变更后需要刷新页面或重新获取权限数据。