vue使用路由守卫实现菜单的权限设置

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

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();
  }
});

<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>