vue权限实现

路由权限控制

使用Vue Router的导航守卫（navigation guards）进行路由权限控制。在路由配置中为需要权限的路由添加meta字段，标记所需权限。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      meta: { requiresAuth: true, roles: ['admin'] }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const currentUser = store.getters.currentUser
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) {
    next('/login')
  } else if (to.meta.roles && !to.meta.roles.includes(currentUser.role)) {
    next('/403')
  } else {
    next()
  }
})

组件级权限控制

创建自定义指令v-permission，用于控制组件级别的显示权限。在全局或局部注册该指令。

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

    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = permissions.some(perm => {
        return value.includes(perm)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('需要权限数组')
    }
  }
})

动态菜单生成

根据用户权限动态生成可访问的菜单列表。在Vuex中存储用户权限信息，通过计算属性过滤菜单。

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

API请求拦截

在axios拦截器中添加权限验证，确保只有有权限的用户才能访问受保护的API。

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) {
    router.push('/login')
  }
  return Promise.reject(error)
})

按钮级权限控制

创建权限检查函数，用于控制按钮的显示和功能可用性。

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

在模板中使用该函数控制按钮显示：

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