修改角色后更新菜单

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
+  <div id="guide" class="menu" :style="{
-    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
+      <el-menu :default-active="activeMenu" :router="true" :collapse="store.getters.isCollapse"
-        :default-active="activeMenu"
+        :collapse-transition="false" :unique-opened="true" :background-color="themeConfig.backgroundColor"
-        :router="true"
+        :text-color="themeConfig.textColor" :active-text-color="themeConfig.primary">
-        :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;

src/router/generateMenu.js

@@ -1,4 +1,3 @@
-import routerList from "./originalRoutingTable";
 // 递归处理路由列表生成菜单数据
 export const generateMenu = (routes, userRole) => {
     const menuList = [];
@@ -59,10 +58,6 @@ export const generateMenu = (routes, userRole) => {
 
     return menuList;
 };
-// 权限检查
-const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
-console.log(generateMenu(routerList, userInfo.role), "menuTable")
-export const menuTable = generateMenu(routerList, userInfo.role)
 
 // 使用示例
 /*

src/views/groupManagement/index.vue

@@ -206,6 +206,7 @@ import {
   syncUsers,
 } from "../../api/modules/index";
 import { Refresh, Search, Plus } from '@element-plus/icons-vue';
+import { useRouter } from 'vue-router';
 
 // 组别列表数据
 const groupList = ref([]);
@@ -278,6 +279,8 @@ const groupRules = {
   ]
 };
 
+const router = useRouter();
+
 // 获取组别列表
 const fetchGroupList = async () => {
   try {
@@ -345,11 +348,22 @@ const handleRoleChange = async (user, role) => {
     );
     if (res.errcode === 0) {
       ElMessage.success("修改成功");
+      const userInfo = JSON.parse(sessionStorage.getItem("userInfo")) || {}
+      // 检查是否是当前登录用户
+      if (user.userid === userInfo?.userid) {
+        ElMessage.warning("您已修改了自己的角色，需要重新登录");
+        gotoLogin()
+      }
     }
   } catch (error) {
     ElMessage.error("修改失败");
   }
 };
+const gotoLogin = () => {
+  sessionStorage.removeItem("token");
+  sessionStorage.removeItem("userInfo");
+  router.push("/login");
+};
 
 // 移除成员
 const handleRemoveUser = async (user) => {

src/views/login/index.vue

@@ -38,8 +38,8 @@ const loginIn = async (code) => {
     type: "success",
   });
   // 拿用户信息
-  obInformation();
+  await obInformation();
-  router.push("/");
+  // router.push("/");
 };
 // 登录判断
 const token = sessionStorage.getItem("token");
@@ -79,7 +79,8 @@ const obInformation = async () => {
   });
 
   sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
-  router.push("/");
+  // router.push("/");
+  router.replace("/")
 };
 </script>