修改角色后更新菜单

src/layout/header/components/avatar.vue

@@ -34,6 +34,7 @@ onMounted(() => {
 })
 const gotoLogin = () => {
   sessionStorage.removeItem("token");
+  sessionStorage.removeItem("userInfo");
   router.push("/login");
 };
 </script>

src/layout/menu/index.vue

@@ -1,13 +1,9 @@
 <template>
-  <div
-    id="guide"
-    class="menu"
-    :style="{
-      width: store.getters.isCollapse == true ? '' : '200px',
-      height: '100%',
-      color: themeConfig.textColor,
-    }"
-  >
+  <div id="guide" class="menu" :style="{
+    width: store.getters.isCollapse == true ? '' : '200px',
+    height: '100%',
+    color: themeConfig.textColor,
+  }">
     <div class="logo" v-if="!store.getters.isCollapse">
       <img src="../../assets/logo.png" alt="" style="margin-right: 5px" /> BIG CUTE
     </div>
@@ -15,16 +11,9 @@
       <img src="../../assets/logo.png" alt="" />
     </div>
     <el-scrollbar style="height: 100%">
-      <el-menu
-        :default-active="activeMenu"
-        :router="true"
-        :collapse="store.getters.isCollapse"
-        :collapse-transition="false"
-        :unique-opened="true"
-        :background-color="themeConfig.backgroundColor"
-        :text-color="themeConfig.textColor"
-        :active-text-color="themeConfig.primary"
-      >
+      <el-menu :default-active="activeMenu" :router="true" :collapse="store.getters.isCollapse"
+        :collapse-transition="false" :unique-opened="true" :background-color="themeConfig.backgroundColor"
+        :text-color="themeConfig.textColor" :active-text-color="themeConfig.primary">
         <menuItems :menuList="menuList"></menuItems>
       </el-menu>
     </el-scrollbar>
@@ -38,7 +27,8 @@ import menuItems from "./components/menuItems.vue";
 // 引入本地路由表渲染导航栏
 // import menuTable from "./menuTable.js";
 import { useRouter, useRoute } from "vue-router";
-import {menuTable} from "../../router/generateMenu.js"
+import { generateMenu } from "../../router/generateMenu.js"
+import routerList from "../../router/originalRoutingTable.js";
 const route = useRoute();
 const activeMenu = computed(() => {
   return route.path;
@@ -54,6 +44,9 @@ const themeConfig = store.getters.themeConfig;
 
 // 菜单表存在后端的操作方式
 onMounted(() => {
+  // 权限检查
+  const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
+  const menuTable = generateMenu(routerList, userInfo.role)
   // 获取本地菜单表渲染
   menuList.value = menuTable;
 });
@@ -61,6 +54,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .menu {
+
   // width: 200px;
   .logo {
     height: 48px;
@@ -69,6 +63,7 @@ onMounted(() => {
     list-style: none;
     cursor: pointer;
     position: relative;
+
     img {
       width: 25px;
       vertical-align: middle;