vue3 pinia根据角色渲染不同的菜单栏

### 实现基于用户角色的动态菜单栏 在 Vue3 和 Pinia 的组合中，通过使用 `Pinia` 来管理状态可以有效地处理不同用户的权限差异，并据此动态调整菜单项。下面介绍一种方法来实现这一目标。 #### 创建存储库用于保存用户信息和菜单列表 首先定义一个名为 `authStore.js` 或者其他合适名称的文件作为 Pinia store： ```javascript import { defineStore } from 'pinia'; export const useAuthStore = defineStore('auth', { state: () => ({ userRoles: [], // 用户的角色数组 menuItems: [] // 动态加载后的菜单条目集合 }), actions: { setRoles(roles) { this.userRoles = roles; }, async fetchMenu() { try { let response; if (this.userRoles.includes('admin')) { response = await axios.get('/api/admin-menus'); } else { response = await axios.get(`/api/user/${this.userRoles}/menus`); } this.menuItems = response.data.menus || []; } catch(error){ console.error("Failed to load menus", error); } } } }); ``` 这段代码创建了一个简单的 Store，它包含了两个主要属性：一个是用来表示当前登录用户所拥有的角色；另一个是用来存放最终要展示给前端用户的菜单列表[^1]。 #### 组件内调用获取菜单逻辑 接着可以在 App.vue 或者任意合适的父级组件里初始化这个过程，在 mounted 生命周期钩子函数里面触发一次菜单拉取操作： ```html <template> <!-- 假设这里是放置 ElMenu 组件的地方 --> </template> <script setup lang="ts"> import { onMounted, ref } from "vue"; import { useAuthStore } from "@/stores/auth"; const authStore = useAuthStore(); onMounted(() => { authStore.fetchMenu(); // 当组件被装载时立即尝试获取最新的菜单结构 }); // 渲染菜单的方法可以根据实际情况编写... </script> ``` 此部分展示了如何利用 Composition API 风格的方式引入之前定义好的 AuthStore 并在其生命周期事件发生之时执行相应的业务逻辑——即向服务器请求对应于特定身份下的导航链接[^2]。 #### 构建视图层以响应式更新 UI 最后一步就是构建实际可见的部分了。假设已经安装好了 Element Plus 库，则可以直接借用其内置组件完成这部分工作： ```html <template> <el-menu :default-active="$route.path" router class="el-menu-vertical-demo"> <MenuItem v-for="(item,index) in visibleMenus" :key="index" :menuData="item"/> </el-menu> </template> <script setup lang="ts"> import { computed } from 'vue'; import MenuItem from './components/MenuItem.vue'; // 自定义菜单项组件路径可能有所不同 import { useAuthStore } from '@/stores/auth'; const authStore = useAuthStore(); const visibleMenus = computed(() => authStore.menuItems); </script> ``` 上述模板片段说明了怎样遍历由 Vuex 提供的数据源 (`visibleMenus`) ，并通过自定义组件 `<MenuItem>` 将每一项渲染出来。值得注意的是这里还应用了一些额外特性比如默认激活项(`$route.path`) 及路由模式(`router`)使得点击某个选项卡能够自动跳转至相应页面[^4]。