vue实现权限控制

Vue 实现权限控制的方法

权限控制在 Vue 应用中通常分为前端路由权限和页面元素权限两部分。以下是常见的实现方式：

基于路由的权限控制

1. 动态路由表
   在用户登录后，根据角色或权限从后端获取可访问的路由配置，通过 router.addRoutes 动态添加路由。

   // 示例：动态添加路由
   const asyncRoutes = [
     { path: '/admin', component: Admin, meta: { roles: ['admin'] } }
   ];
   router.addRoutes(asyncRoutes);

2. 路由守卫校验
   在全局前置守卫 router.beforeEach 中检查用户权限，拦截无权限的导航。

   

   router.beforeEach((to, from, next) => {
     const hasPermission = checkUserPermission(to.meta.roles);
     if (!hasPermission) next('/forbidden');
     else next();
   });

基于页面元素的权限控制

1. 自定义指令 v-permission
   注册全局指令，根据权限动态显示/隐藏 DOM 元素。

   Vue.directive('permission', {
     inserted(el, binding) {
       if (!checkPermission(binding.value)) {
         el.parentNode.removeChild(el);
       }
     }
   });

   使用方式：

   

   <button v-permission="'delete'">删除</button>

2. 权限函数过滤
   在组件中通过方法判断权限，结合 v-if 控制渲染。

   methods: {
     hasPermission(permission) {
       return this.userPermissions.includes(permission);
     }
   }

   模板示例：

   <template>
     <button v-if="hasPermission('edit')">编辑</button>
   </template>

状态管理集成

将权限数据存储在 Vuex 中集中管理，便于全局访问和更新：

// store.js
const store = new Vuex.Store({
  state: {
    permissions: []
  },
  mutations: {
    setPermissions(state, payload) {
      state.permissions = payload;
    }
  }
});

后端协作要点

• 权限数据应由后端返回，前端仅负责展示逻辑。
• 敏感操作需后端二次校验，避免仅依赖前端控制。
• 推荐采用 JWT 或类似机制传递权限信息。

注意事项

• 静态路由需包含基础页面（如登录页、404页）。
• 权限变更时需刷新路由或重新登录以更新状态。
• 生产环境应结合代码分割优化动态路由加载性能。