vue如何实现权限管理

路由权限控制

通过Vue Router的全局前置守卫beforeEach实现路由拦截，结合用户角色动态过滤可访问路由表。定义静态路由（如登录页）和动态路由，后者根据用户权限动态加载。

// router/index.js
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.meta.requiresAuth && !hasToken) {
    next('/login')
  } else {
    next()
  }
})

动态菜单生成

根据用户权限数据过滤路由配置，生成侧边栏菜单。使用vuex存储权限列表，通过computed属性动态计算可展示菜单项。

// store/modules/permission.js
const filterRoutes = (routes, roles) => {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

按钮级权限控制

通过自定义指令v-permission实现按钮显隐控制。在指令的inserted钩子中判断当前用户是否拥有该按钮权限。

// directives/permission.js
Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const roles = store.getters.roles
    if (value && !roles.includes(value)) {
      el.parentNode.removeChild(el)
    }
  }
})

API请求拦截

在axios拦截器中添加权限验证，无权限的请求直接返回错误。请求头携带token，后端接口进行二次校验。

// utils/request.js
service.interceptors.request.use(config => {
  config.headers['Authorization'] = getToken()
  return config
}, error => {
  return Promise.reject(error)
})

权限数据持久化

登录成功后存储权限信息至localStorage或vuex，页面刷新时从持久化存储中恢复权限状态。结合vuex-persistedstate插件实现状态持久化。

// store/index.js
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  plugins: [createPersistedState({
    key: 'auth',
    paths: ['user', 'permission']
  })]
})

权限更新机制

提供权限刷新接口，当用户权限变更时主动调用接口更新本地权限数据。监听权限变化事件，动态更新路由和菜单。

// utils/auth.js
export function refreshPermission() {
  return request({
    url: '/auth/refresh',
    method: 'post'
  }).then(res => {
    store.dispatch('user/setRoles', res.data.roles)
    return res
  })
}