vue权限管理怎么实现

路由权限控制

使用vue-router的beforeEach钩子进行全局路由守卫，结合用户角色动态生成可访问路由表。在路由配置中添加meta字段标记所需权限：

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

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!userRoles.some(role => to.meta.roles.includes(role))) {
      next('/403')
    } else {
      next()
    }
  } else {
    next()
  }
})

动态菜单渲染

根据用户权限过滤导航菜单，在Vuex中存储权限数据，通过计算属性生成可见菜单项：

computed: {
  accessibleRoutes() {
    return this.$store.state.routes.filter(route => {
      return !route.meta || !route.meta.roles || 
        route.meta.roles.some(role => this.userRoles.includes(role))
    })
  }
}

按钮级权限控制

创建自定义指令v-permission实现按钮粒度的权限控制，在指令中比对当前用户权限与元素要求的权限：

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

    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = roles.some(role => value.includes(role))
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('需要指定权限数组')
    }
  }
})

接口请求鉴权

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

权限数据持久化

使用localStorage或cookie存储权限标识，在页面刷新时从持久化存储中恢复权限状态：

const whiteList = ['/login']
router.beforeEach((to, from, next) => {
  if (getToken()) {
    if (to.path === '/login') {
      next('/')
    } else {
      if (store.getters.roles.length === 0) {
        store.dispatch('GetUserInfo').then(() => {
          next({ ...to, replace: true })
        })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})