当前位置：首页 > VUE

vue操作权限实现

2026-01-19 14:09:46VUE

Vue 权限控制实现方案

Vue 中实现权限控制通常涉及前端路由、按钮/组件级权限、接口权限等多个层面。以下是常见的实现方法：

路由权限控制

通过动态路由实现，根据用户权限过滤可访问的路由：

定义全部路由和权限标识

vue操作权限实现

const routes = [
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true, permission: 'admin' } },
{ path: '/user', component: User, meta: { requiresAuth: true, permission: 'user_manage' } }
]

登录后获取用户权限并过滤路由


// 假设获取的用户权限为 ['admin']
const userPermissions = ['admin']

router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !hasPermission(to.meta.permission, userPermissions)) { next('/403') // 无权限跳转 } else { next() } })

vue操作权限实现

function hasPermission(required, userPermissions) { return userPermissions.includes(required) }


---

### 组件/按钮权限控制

1. 创建权限指令
```javascript
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)
    }
  }
})

在模板中使用

<button v-permission="'user_delete'">删除用户</button>

API 权限控制

虽然前端可以做接口权限校验，但最终应以后端验证为准：

封装请求拦截器


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


---

### 权限数据存储方案

1. 使用 Vuex 集中管理权限状态
```javascript
const store = new Vuex.Store({
  state: {
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  },
  actions: {
    async fetchPermissions({ commit }) {
      const res = await getPermissionsAPI()
      commit('SET_PERMISSIONS', res.data)
    }
  }
})

登录后初始化权限

login().then(() => {
store.dispatch('fetchPermissions')
// 根据权限动态添加路由
const accessedRoutes = filterAsyncRoutes(asyncRoutes, store.state.permissions)
router.addRoutes(accessedRoutes)
})