Vue 动态菜单：根据登陆用户显示专属菜单

2023-11-20 21:38:11

前言

在使用 Gateway 网关实现用户认证与鉴权这篇文章中，我们介绍了基于 Gateway 实现的基本用户认证与鉴权。现在，我们要进一步探讨如何在前端界面中根据用户的权限动态展示菜单。例如，在侧边栏菜单中，我们可以根据用户的角色和权限来决定哪些菜单项应该显示，哪些应该隐藏。

实现步骤

1. 准备工作

首先，我们需要在路由配置中定义路由元信息 (route meta) 来存储用户的访问权限。例如，我们可以为不同的角色定义不同的权限数组，并将其存储在路由元信息中。

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      auth: true,
      roles: ['admin', 'manager']
    }
  },
  {
    path: '/users',
    name: 'Users',
    component: Users,
    meta: {
      auth: true,
      roles: ['admin']
    }
  },
  // ... 其他路由
];

2. 使用守卫 (guard) 检查权限

接下来，我们需要使用守卫 (guard) 来检查用户是否有权访问特定的菜单项。守卫是一个钩子函数，它会在路由导航发生之前被调用。我们可以通过守卫来检查用户的角色和权限，并根据检查结果来决定是否允许用户访问该路由。

const router = new VueRouter({
  routes,
  beforeEach: (to, from, next) => {
    // 检查用户是否已经登录
    if (to.meta.auth && !isAuthenticated()) {
      next('/login');
    } else {
      // 检查用户是否有权访问该路由
      if (to.meta.roles && !hasPermission(to.meta.roles)) {
        next('/forbidden');
      } else {
        next();
      }
    }
  }
});

3. 在前端展示动态菜单

最后，我们需要在前端界面中根据用户的权限动态展示菜单。我们可以使用 Vue.js 的 v-if 指令来控制菜单项的显示和隐藏。

<template>
  <nav>
    <ul>
      <li v-for="item in menuItems" v-if="hasPermission(item.roles)">
        <a :href="item.path">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          path: '/dashboard',
          name: 'Dashboard',
          roles: ['admin', 'manager']
        },
        {
          path: '/users',
          name: 'Users',
          roles: ['admin']
        },
        // ... 其他菜单项
      ]
    };
  },
  methods: {
    hasPermission(roles) {
      // 检查用户是否有权访问该菜单项
      return true; // 这里需要根据实际情况来实现
    }
  }
};
</script>