当前位置：首页 > VUE

vue实现权限分离

2026-02-16 23:14:51VUE

Vue 实现权限分离的方法

在 Vue 项目中实现权限分离通常涉及前端路由控制、组件级权限和接口权限管理。以下是几种常见的方法：

基于路由的权限控制

通过动态路由表实现权限分离，根据用户角色或权限动态生成可访问的路由。

// 在路由配置中定义 meta 字段标记权限
const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: { requiresAuth: true, roles: ['admin'] }
  }
]

// 路由守卫中检查权限
router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles
  if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
    next('/forbidden')
  } else {
    next()
  }
})

组件级权限控制

使用自定义指令或高阶组件控制组件显示权限。

// 注册全局权限指令
Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const permissions = store.getters.permissions
    if (!permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

// 模板中使用
<button v-permission="'user.delete'">删除用户</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) {
      // 处理权限不足情况
    }
    return Promise.reject(error)
  }
)

权限数据管理

建议使用 Vuex 集中管理权限状态。

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

动态菜单生成

根据权限动态生成导航菜单。

vue实现权限分离

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

实现时需注意前后端权限校验的配合，前端权限控制主要提供用户体验优化，最终权限验证应由后端完成。权限数据建议在用户登录后获取并存储在本地，同时考虑 Token 过期等安全策略。