面试题：如何在 Vue 中实现权限管理？如何控制权限到按钮级别？

在 Vue 中实现权限管理是一个常见的需求，尤其是在需要根据用户角色或权限动态控制页面访问和操作权限的场景中。以下是实现权限管理以及控制权限到按钮级别的详细方法：

---

1. 权限管理的基本思路

• 路由权限控制：根据用户权限动态生成路由表，控制用户访问的页面。
• 按钮权限控制：根据用户权限动态显示或隐藏按钮。

---

2. 实现路由权限控制

（1）定义路由表

在 router.js 中定义所有路由，并为每个路由添加 meta 字段，用于标识路由的权限。

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'editor'] }, // 需要权限
  },
  {
    path: '/login',
    component: Login,
    meta: { requiresAuth: false }, // 无需权限
  },
];

（2）全局路由守卫

在 router.js 中添加全局路由守卫，检查用户权限并控制路由跳转。

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 检查用户是否登录
  const userRoles = getUserRoles(); // 获取用户角色

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 如果需要权限且用户未登录，跳转到登录页
    next('/login');
  } else if (to.meta.roles && !to.meta.roles.includes(userRoles)) {
    // 如果用户角色不符合要求，跳转到无权限页面
    next('/403');
  } else {
    // 允许访问
    next();
  }
});

（3）动态生成路由表

根据用户权限动态生成路由表，只加载用户有权限访问的路由。

const dynamicRoutes = [
  {
    path: '/admin',
    component: Admin,
    meta: { roles: ['admin'] }, // 只有 admin 可以访问
  },
  {
    path: '/editor',
    component: Editor,
    meta: { roles: ['editor'] }, // 只有 editor 可以访问
  },
];

// 根据用户角色过滤路由
const filteredRoutes = dynamicRoutes.filter(route => {
  return route.meta.roles.includes(userRoles);
});

// 添加过滤后的路由
router.addRoutes(filteredRoutes);

---

3. 实现按钮权限控制

（1）定义权限指令

通过自定义指令 v-permission 控制按钮的显示和隐藏。

// main.js
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding; // 获取指令的值
    const userRoles = getUserRoles(); // 获取用户角色

    if (value && value.length > 0) {
      const hasPermission = value.includes(userRoles); // 检查用户是否有权限
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el); // 移除按钮
      }
    } else {
      throw new Error('请设置权限值');
    }
  },
});

（2）在按钮中使用权限指令

在模板中使用 v-permission 指令控制按钮的显示和隐藏。

<template>
  <div>
    <button v-permission="['admin']">管理员按钮</button>
    <button v-permission="['editor']">编辑按钮</button>
  </div>
</template>

（3）使用计算属性控制按钮显示

通过计算属性动态控制按钮的显示和隐藏。

<template>
  <div>
    <button v-if="hasAdminPermission">管理员按钮</button>
    <button v-if="hasEditorPermission">编辑按钮</button>
  </div>
</template>

<script>
export default {
  computed: {
    hasAdminPermission() {
      return this.userRoles.includes('admin');
    },
    hasEditorPermission() {
      return this.userRoles.includes('editor');
    },
  },
  data() {
    return {
      userRoles: getUserRoles(), // 获取用户角色
    };
  },
};
</script>

---

4. 权限管理的优化

（1）权限缓存

• 将用户权限信息缓存到 localStorage 或 Vuex 中，避免每次都需要从服务器获取。

（2）权限接口

• 提供权限接口，动态获取用户的权限信息。

（3）按钮权限的统一管理

• 将按钮权限配置统一管理，例如放在 permission.js 中，方便维护和修改。

// permission.js
export const buttonPermissions = {
  admin: ['create', 'delete', 'edit'],
  editor: ['edit'],
};

---

5. 总结

• 路由权限控制：
  • 通过 meta 字段标识路由权限。
  • 使用全局路由守卫检查用户权限。
  • 动态生成路由表，只加载用户有权限访问的路由。
• 按钮权限控制：
  • 使用自定义指令 v-permission 控制按钮显示和隐藏。
  • 使用计算属性动态控制按钮显示。

通过以上方法，可以实现 Vue 中的权限管理，并控制权限到按钮级别，确保用户只能访问和操作自己有权限的内容。