使用vue实现权限控制

基于路由的权限控制

通过路由守卫（beforeEach）结合用户角色动态过滤路由表，仅允许访问有权限的路由。

实现步骤

1. 定义路由元信息
   在路由配置中添加 meta 字段标记所需权限角色：

   const routes = [
     { path: '/admin', component: AdminPage, meta: { roles: ['admin'] } },
     { path: '/user', component: UserPage, meta: { roles: ['user', 'admin'] } }
   ];

2. 全局前置守卫校验权限
   在 router.beforeEach 中检查用户角色是否匹配路由要求：

   router.beforeEach((to, from, next) => {
     const userRoles = store.getters.roles; // 从Vuex或Pinia获取用户角色
     if (to.meta?.roles) {
       if (userRoles.some(role => to.meta.roles.includes(role))) {
         next();
       } else {
         next('/forbidden'); // 跳转到无权限页面
       }
     } else {
       next();
     }
   });

动态菜单渲染

根据用户权限过滤导航菜单，仅显示有权限访问的菜单项。

实现步骤

1. 过滤菜单数据
   使用计算属性基于用户角色过滤菜单：

   computed: {
     filteredMenus() {
       return allMenus.filter(menu => {
         return !menu.meta?.roles || this.userRoles.some(role => menu.meta.roles.includes(role));
       });
     }
   }

2. 渲染菜单组件
   在模板中遍历过滤后的菜单数据：

   <template v-for="menu in filteredMenus">
     <router-link :to="menu.path">{{ menu.title }}</router-link>
   </template>

组件级权限控制

使用自定义指令或高阶组件控制按钮/组件的显示。

自定义指令实现

1. 注册指令

   Vue.directive('permission', {
     inserted(el, binding, vnode) {
       const { value } = binding;
       const userRoles = vnode.context.$store.getters.roles;
       if (value && !userRoles.some(role => value.includes(role))) {
         el.parentNode?.removeChild(el); // 无权限时移除元素
       }
     }
   });

2. 模板中使用

   <button v-permission="['admin']">删除</button>

API请求拦截

在Axios拦截器中校验接口权限，防止非法请求。

实现示例

axios.interceptors.request.use(config => {
  const requiredRole = config.meta?.role; // 从接口配置获取所需角色
  if (requiredRole && !userRoles.includes(requiredRole)) {
    return Promise.reject(new Error('无权限访问'));
  }
  return config;
});

补充说明

• 角色管理：建议将角色数据存储在Vuex或Pinia中集中管理。
• 动态路由：可通过 router.addRoutes()（Vue 2）或 router.addRoute()（Vue 3）动态注册路由。
• 按钮级控制：若需更细粒度控制，可结合 v-if 与权限校验函数。

以上方法可根据实际项目需求组合使用，实现从路由到组件层的完整权限控制。