vue实现菜单的权限设置

在Vue应用程序中，可以使用路由守卫（route guard）来控制用户的访问权限，从而实现菜单权限设置。

实现方法：

1.在路由配置中添加meta字段，用于存储路由的访问权限等信息。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { requiresAuth: true, roles: ['admin', 'user'] }
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true, roles: ['admin'] }
    },
    // ...
  ]
});

在以上代码中，我们在路由配置中添加了meta字段，并存储了路由的访问权限等信息。requiresAuth表示该路由是否需要登录才能访问，roles表示该路由可以被哪些角色访问。

2.在全局路由守卫中检查用户的访问权限。

我们使用全局路由守卫来检查用户的访问权限。首先，我们检查用户是否已经登录。然后，检查该路由是否需要登录才能访问。如果需要登录且用户未登录，则跳转到登录页。如果需要登录且需要角色权限且用户不具备对应的角色权限，则跳转到无权限提示页。最后，其他情况均放行。

router.beforeEach((to, from, next) => {
  const isLoggedIn = AuthService.isLoggedIn(); // 检查用户是否已经登录
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const roles = to.meta.roles || [];

  if (requiresAuth && !isLoggedIn) {
    // 如果需要登录且用户未登录，则跳转到登录页
    next('/login');
  } else if (requiresAuth && roles.length > 0 && !AuthService.hasRoles(roles)) {
    // 如果需要登录且需要角色权限且用户不具备对应的角色权限，则跳转到无权限提示页
    next('/forbidden');
  } else {
    // 其他情况均放行
    next();
  }
});

 3.在菜单组件中根据用户的访问权限来生成菜单。

我们使用canAccess()方法来检查当前用户是否有权访问某个路由。首先，我们查找该路由对应的路由配置，并从该配置中获取路由的访问权限等信息。然后，根据路由的访问权限等信息和当前用户的登录状态、角色等信息来判断是否有权访问该路由。

在菜单组件中，我们使用v-if指令来根据用户的访问权限来生成菜单。如果用户有权访问某个路由，则显示该路由对应的菜单项；否则，不显示该菜单项。

<template>
  <div>
    <nav>
      <ul>
        <li v-if="canAccess('/home')"><router-link to="/home">Home</router-link></li>
        <li v-if="canAccess('/dashboard')"><router-link to="/dashboard">Dashboard</router-link></li>
        <!-- ... -->
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  methods: {
    canAccess(path) {
      const route = this.$router.options.routes.find(r => r.path === path);
      return route && (!route.meta.requiresAuth || AuthService.isLoggedIn()) && (!route.meta.roles || AuthService.hasRoles(route.meta.roles));
    }
  }
};
</script>

 通过以上步骤，可以根据用户的访问权限来生成菜单，并且在用户访问某个路由时进行权限检查，从而确保应用程序的安全性和稳定性。