Nuxt+Vuetify项目根据用户角色在应用抽屉展示不同侧边栏菜单的方案咨询

完全可以仅通过Nuxt本身实现该需求，不需要依赖Firebase，以下是可落地的实现方案：

步骤1：改造菜单配置，新增权限字段 #

修改@/assets/api/menu.js，给每个菜单项添加roles字段标记允许访问的角色，公共页面无需配置该字段默认对所有角色开放：

const Menu = [
    {
        title: 'Home',
        href: '/home'
    }, 
    {
        title: 'Admin',
        href: '/admin',
        roles: ['admin']
    }, 
    {
        title: 'Admin Setting',
        href: '/adminsetting',
        roles: ['admin']
    }, 
    {
        title: 'Customer',
        href: '/customer',
        roles: ['customer']
    }, 
    {
        title: 'Customer Profile',
        href: '/customer-profile', // 建议把路径空格替换为短横线更规范
        roles: ['customer']
    }, 
];

// 原有排序逻辑保留
Menu.forEach((item) => {
  if (item.items) {
    item.items.sort((x, y) => {
      let textA = x.name.toUpperCase();
      let textB = y.name.toUpperCase();
      return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
    });
  }
});

export default Menu;

步骤2：全局存储登录用户角色 #

用户登录成功后，将角色信息存储到全局状态中：

• Nuxt3 推荐用内置的useState：

// 全局状态定义，可放在composables目录下
export const useUserRole = () => useState('userRole', () => null)

登录成功后赋值：useUserRole().value = 'admin' 或 'customer'

• Nuxt2 直接用Vuex/Pinia存储即可

步骤3：AppDrawer组件新增菜单过滤逻辑 #

在@/components/AppDrawer.vue中新增计算属性，递归过滤符合当前用户角色的菜单：

import Menu from '@/assets/api/menu.js'
import { useUserRole } from '~/composables/useUserRole' // Nuxt3示例，Nuxt2从vuex取角色即可

export default {
  computed: {
    filteredMenus() {
      const currentRole = useUserRole().value
      // 未登录默认返回公共菜单，可根据业务调整
      if (!currentRole) return Menu.filter(item => !item.roles)
      
      // 递归过滤菜单
      const filterMenu = (list) => {
        return list.filter(item => {
          // 判断当前项是否有权限
          const hasPerm = !item.roles || item.roles.includes(currentRole)
          if (!hasPerm) return false
          // 有子菜单则递归过滤子项
          if (item.items) {
            item.items = filterMenu(item.items)
            // 子菜单全部无权限时父菜单也隐藏
            return item.items.length > 0
          }
          return true
        })
      }
      return filterMenu(structuredClone(Menu)) // 深拷贝避免修改原配置
    }
  }
}

步骤4：修改模板渲染逻辑 #

把模板中原来遍历的menus替换为filteredMenus即可，其余原有渲染逻辑完全不用改动：

<v-list dense expand>
  <!-- 把原来的v-for="(item, i) in menus" 替换为下面的 -->
  <template v-for="(item, i) in filteredMenus">
    <!-- 原有渲染逻辑完全保留 -->
    ...
  </template>
</v-list>

注意事项 #

• 前端菜单过滤仅为视觉层面的控制，必须额外添加路由守卫和后端接口权限校验，避免用户直接输入URL访问无权限页面
• 后续新增角色仅需要在菜单配置的roles数组中添加对应角色标识即可，无需修改渲染逻辑

内容的提问来源于stack exchange，提问作者user16136444