当前位置：首页 > VUE

vue 实现权限

2026-01-12 11:19:01VUE

Vue 实现权限控制的方法

在 Vue 项目中实现权限控制通常涉及前端路由权限、按钮权限和 API 权限等多个层面。以下是几种常见的实现方式：

基于路由的权限控制

使用 Vue Router 的全局前置守卫 beforeEach 拦截路由跳转，结合用户角色或权限列表动态生成可访问的路由表。

// router.js
router.beforeEach((to, from, next) => {
  const userRole = localStorage.getItem('userRole');
  const requiredRole = to.meta.requiredRole;

  if (!requiredRole || userRole === requiredRole) {
    next();
  } else {
    next('/forbidden');
  }
});

动态路由添加

通过后端返回的权限列表动态生成路由表，仅添加用户有权限访问的路由。

// 动态添加路由
function addRoutes() {
  const allowedRoutes = fetchUserRoutes(); // 从后端获取权限路由
  allowedRoutes.forEach(route => {
    router.addRoute(route);
  });
}

指令式权限控制

自定义 Vue 指令 v-permission 控制按钮或元素的显示隐藏。

// main.js
Vue.directive('permission', {
  inserted(el, binding) {
    const userPermissions = store.state.user.permissions;
    if (!userPermissions.includes(binding.value)) {
      el.parentNode.removeChild(el);
    }
  }
});

// 使用方式
<button v-permission="'create_user'">创建用户</button>

组合式 API 权限控制

在 Vue 3 中使用组合式 API 封装权限逻辑，方便复用。

// usePermission.js
import { computed } from 'vue';
import { useStore } from 'vuex';

export function usePermission() {
  const store = useStore();
  const hasPermission = (permission) => {
    return computed(() => store.state.user.permissions.includes(permission));
  };
  return { hasPermission };
}

// 组件中使用
const { hasPermission } = usePermission();
const canEdit = hasPermission('edit_post');

权限数据管理

将用户权限信息存储在 Vuex 或 Pinia 中，保持全局状态同步。

// store/modules/user.js
export default {
  state: {
    permissions: []
  },
  mutations: {
    setPermissions(state, permissions) {
      state.permissions = permissions;
    }
  },
  actions: {
    async fetchPermissions({ commit }) {
      const res = await api.getUserPermissions();
      commit('setPermissions', res.data);
    }
  }
};

接口权限拦截

在 axios 拦截器中检查接口权限，无权限时取消请求或提示。

// http.js
instance.interceptors.request.use(config => {
  const requiredPermission = config.meta?.permission;
  if (requiredPermission && !store.getters.hasPermission(requiredPermission)) {
    return Promise.reject(new Error('无权限访问'));
  }
  return config;
});

以上方法可以单独使用或组合使用，具体选择取决于项目需求和复杂度。对于中小型项目，路由守卫结合自定义指令通常足够；大型项目可能需要更完善的动态路由和细粒度权限控制方案。

vue 实现权限