vue中实现权限控制

路由权限控制

通过路由守卫实现页面级别的权限控制，在router.beforeEach中校验用户权限。定义路由时添加meta字段标记所需权限：

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

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles // 从Vuex获取用户角色
  if (to.meta.requiresAuth && !userRoles) {
    next('/login')
  } else if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
    next('/403') // 无权限页面
  } else {
    next()
  }
})

组件级权限控制

创建自定义指令v-permission实现组件粒度的权限控制：

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

    if (value && Array.isArray(value) && value.length > 0) {
      const hasPermission = roles.some(role => value.includes(role))
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定权限数组，如 v-permission="['admin']"`)
    }
  }
})

使用方式：

<button v-permission="['admin']">删除</button>

API请求权限控制

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

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

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 403) {
      router.push('/403')
    }
    return Promise.reject(error)
  }
)

动态菜单生成

根据用户权限过滤导航菜单：

computed: {
  accessibleRoutes() {
    return this.allRoutes.filter(route => {
      if (!route.meta || !route.meta.roles) return true
      return route.meta.roles.some(role => this.userRoles.includes(role))
    })
  }
}

权限数据管理

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

const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, payload) {
      state.roles = payload.roles
      state.permissions = payload.permissions
    }
  },
  actions: {
    async fetchPermissions({ commit }) {
      const res = await api.getUserPermissions()
      commit('SET_PERMISSIONS', res.data)
    }
  }
})

按钮级权限控制

通过方法判断是否显示操作按钮：

methods: {
  checkPermission(requiredPermission) {
    return this.$store.getters.permissions.includes(requiredPermission)
  }
}

模板中使用：

<button v-if="checkPermission('user:delete')">删除用户</button>