Vue realizes the permission setting of the menu

In the Vue application, you can use the route guard (route guard) to control the user's access rights, so as to realize the menu permission setting.

Implementation:

1. Add a meta field in the routing configuration to store information such as access rights of the routing.

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

In the above code, we added a meta field to the route configuration and stored information such as the access rights of the route. requiresAuthIndicates whether the route needs to be logged in to access, and rolesindicates which roles the route can be accessed by.

2. Check the user's access rights in the global routing guard.

We use global route guards to check user access rights. First, we check to see if the user is logged in. Then, check to see if the route requires a login to access. If login is required and the user is not logged in, redirect to the login page. If login is required and role permissions are required and the user does not have the corresponding role permissions, jump to the no permission prompt page. Finally, all other conditions are allowed.

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. In the menu component, the menu is generated according to the user's access authority.

We use canAccess()methods to check if the current user has access to a certain route. First, we look up the route configuration corresponding to the route, and obtain information such as the access rights of the route from the configuration. Then, judge whether to have the right to access the route according to information such as the access authority of the route and information such as the login status and role of the current user.

In the menu component, we use v-ifdirectives to generate the menu based on the user's access rights. If the user has access to a route, show the menu item for that route; otherwise, don't show the menu item.

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

 Through the above steps, the menu can be generated according to the user's access authority, and the authority check is performed when the user accesses a certain route, so as to ensure the security and stability of the application.