任务管理菜单添加了用户角色判断能力，并添加任务管理页面的路由守卫（游客禁止访问任务管理页面）

src/components/AppVue/Header.vue

@@ -4,7 +4,7 @@
     <div class="menu">
       <ul class="menu_ul">
         <li
-          v-for="item in $store.state.menuList"
+          v-for="item in menuList"
           :key="item.path"
           :class="{ active: $route.path == item.path }"
           @click="$router.push(item.path)"
@@ -19,7 +19,21 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      menuList: this.$store.state.menuList,
+    };
+  },
+  watch: {
+    "$store.state.userInfo"(to, from) {
+      if (this.$getUserType() != 1) {
+        this.menuList = Object.assign(
+          [...this.$store.state.menuList],
+          [{ path: "/taskManger", label: "任务管理" }]
+        );
+      } else {
+        this.menuList = this.$store.state.menuList;
+      }
+    },
   },
   mounted() {},
   methods: {},

src/main.js

@@ -28,26 +28,41 @@ initApp.config.globalProperties.$getDmsTypes = (cName, index) => {
     return store.state.DmsTypesMap[cName] ? store.state.DmsTypesMap[cName][index + ''] : cName + "_" + index;
 };
 // 添加自定义方法，得到用户类型【1：游客；2：普通用户；3：管理员】
-initApp.config.globalProperties.$getUserType = () => {
-    // 得到用户id
-    let userId = store.state.userInfo.id;
-    // 得到角色ids
-    let roleIds = store.state.userInfo.roleId;
-    // 得到默认游客id
-    let touristUserId = systemConfig.touristUserId;
-    // 得到默认管理员角色id(roleId,在Oauth中配置)
-    let adminRoleId = systemConfig.adminRoleId;
-    if (!store.state.userInfo || !userId || !roleIds || userId == touristUserId) {
+const getUserType = () => {
+    if (store.state.userInfo && store.state.userInfo.id != null) {
+        // 得到用户id
+        let userId = store.state.userInfo.id;
+        // 得到角色ids
+        let roleIds = store.state.userInfo.roleId;
+        // 得到默认游客id
+        let touristUserId = systemConfig.touristUserId;
+        // 得到默认管理员角色id(roleId,在Oauth中配置)
+        let adminRoleId = systemConfig.adminRoleId;
+        if (!store.state.userInfo || !userId || !roleIds || userId == touristUserId) {
+            // 游客
+            return 1;
+        } else if (roleIds.split(',').includes(adminRoleId)) {
+            // 管理员
+            return 3;
+        } else {
+            // 普通用户
+            return 2;
+        }
+    } else {
         // 游客
         return 1;
-    } else if (roleIds.split(',').includes(adminRoleId)) {
-        // 管理员
-        return 3;
-    } else {
-        // 普通用户
-        return 2;
     }
 }
+initApp.config.globalProperties.$getUserType = getUserType;
+// 添加router的前置守卫，判断用户角色，游客不能访问任务管理页面
+router.beforeEach((to, from, next) => {
+    if (to.path == "/taskManger" && getUserType() == 1) {
+        // 游客不能访问任务管理页面
+        next({ path: "/" });
+    } else {
+        next();
+    }
+});
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     initApp.component(key, component)

src/store/index.js

@@ -19,7 +19,7 @@ export default createStore({
       { path: "/wgn", label: "微功能" },
       { path: "/yygl", label: "应用管理" },
       { path: "/yxgl", label: "运行管理" },
-      { path: "/taskManger", label: "任务管理" },
+      // { path: "/taskManger", label: "任务管理" } 移动到Header中判断权限了
     ],
     sksjgl: {},
     skmh: {},