登录后根据用户角色显示不同的侧边栏项目或隐藏某些组件(VUEJS)

const UserRole = {
  ADMIN: 'admin',
  USER: 'user',
};

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: {
      requiresAuth: true, // 需要登录才能访问
      roles: [UserRole.ADMIN], // 只有管理员角色可以访问
    },
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () => import('@/views/Profile.vue'),
    meta: {
      requiresAuth: true, // 需要登录才能访问
      roles: [UserRole.ADMIN, UserRole.USER], // 管理员和用户角色都可以访问
    },
  },
  // 其他路由配置...
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

// 路由导航守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkUserAuthentication(); // 检查用户是否已登录
  const userRole = getUserRole(); // 获取用户角色

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 需要登录但用户未登录，跳转到登录页面
    next('/login');
  } else if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    // 用户角色不满足访问要求，跳转到无权限页面或其他处理
    next('/unauthorized');
  } else {
    // 用户满足访问要求，继续导航
    next();
  }
});

export default router;

<template>
  <div>
    <router-link to="/dashboard">Dashboard</router-link>
    <router-link to="/profile">Profile</router-link>
    <!-- 其他侧边栏项目 -->
  </div>
</template>

<script>
export default {
  // ...
  computed: {
    isAuthenticated() {
      return checkUserAuthentication(); // 检查用户是否已登录
    },
    userRole() {
      return getUserRole(); // 获取用户角色
    },
  },
};
</script>