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>

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