vue element 实现权限

权限控制实现思路

在Vue+Element项目中实现权限控制通常需要结合前端路由和界面元素的动态控制。核心思路是根据用户角色或权限数据，动态生成可访问的路由和界面元素。

路由权限控制

通过Vue Router的导航守卫实现路由级别的权限控制。在路由配置中添加meta字段标记所需权限：

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

在全局前置守卫中校验权限：

router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  const userRoles = store.getters.roles

  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()
  }
})

动态菜单生成

根据用户权限过滤生成可访问的菜单：

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
    }
  })
}

按钮级权限控制

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

Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters.permissions

    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

在模板中使用：

<el-button v-permission="'user:add'">新增用户</el-button>

权限数据管理

建议使用Vuex集中管理权限状态：

const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_ROLES(state, roles) {
      state.roles = roles
    },
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  }
})

后端接口配合

前端权限控制需要与后端配合完成：

1. 登录接口返回用户角色和权限标识
2. 每个接口需要做权限校验
3. 建议使用JWT等机制管理认证状态

权限变更处理

当用户权限发生变化时，需要：

1. 清除现有路由
2. 重新获取用户权限
3. 动态添加符合权限的路由
4. 刷新页面或跳转到首页

async function resetPermissions() {
  const { roles } = await getUserInfo()
  const accessedRoutes = await dispatch('generateRoutes', roles)
  router.addRoutes(accessedRoutes)
}