更新 路由及store存储逻辑

src/main.js

@@ -12,16 +12,23 @@ import Certs from "./components/Certs.vue";
 const app = createApp(App);
 app.component("Certs", Certs);
 app.component("Uploader", Uploader);
+
+let userId = localStorage.userId;
+if (userId) {
+  store.dispatch("GetBasePermissionData", localStorage.loginAccountId);
+  store.dispatch("GetUserPermission", localStorage.loginAccountId);
+}
+
 router.beforeEach(async (to, from, next) => {
-  let userId = localStorage.userId;
-  if (userId) {
+  if (localStorage.userId) {
     store.commit("changeLogin", true);
-    store.dispatch("GetBasePermissionData", localStorage.loginAccountId);
-    store.dispatch("GetUserPermission", localStorage.loginAccountId);
+    let rolePermission = localStorage.rolePermission?.split(",") || [];
     if (0 === to.matched.length) {
       next("/voyage/voyageList");
     } else if (to.path == "/login" || to.path == "/") {
       next("/voyage/voyageList");
+    } else if (rolePermission?.indexOf(to.meta.code) == -1) {
+      next("/voyage/voyageList");
     } else {
       next();
     }
@@ -40,13 +47,10 @@ router.afterEach((to, from) => {
   store.commit("setCurrentMenuItem", to.path);
   store.commit("changefirstTitle", title);
 });
-app.config.globalProperties.check = () => {
-  console.log("check");
-};
 
 app.directive("auth", {
   mounted(el, bind) {
-    let permissions = store.state.userPermission;
+    let permissions = localStorage.rolePermission?.split(",");
     if (permissions.indexOf(bind.value) == -1) {
       el.parentNode.removeChild(el);
     }

src/router/index.js

@@ -41,55 +41,53 @@ const router = createRouter({
       },
       component: VoyageList,
     },
-  ],
-});
-let data = [
-  {
-    path: "/accountManage/subAccountList",
-    name: "subAccountList",
-    meta: {
-      title: "子账户列表",
-      code: "ACCOUNTLIST",
+    {
+      path: "/accountManage/subAccountList",
+      name: "subAccountList",
+      meta: {
+        title: "子账户列表",
+        code: "ACCOUNTLIST",
+      },
+      component: () => import("../views/accountManage/subAccountList.vue"),
     },
-    component: () => import("../views/accountManage/subAccountList.vue"),
-  },
-  {
-    path: "/agencyManage/agencyCompanyList",
-    name: "agencyCompanyList",
-    meta: {
-      title: "代理公司列表",
-      code: "PROXYLIST",
+    {
+      path: "/agencyManage/agencyCompanyList",
+      name: "agencyCompanyList",
+      meta: {
+        title: "代理公司列表",
+        code: "PROXYLIST",
+      },
+      component: () => import("../views/agencyManage/agencyCompanyList.vue"),
     },
-    component: () => import("../views/agencyManage/agencyCompanyList.vue"),
-  },
-  {
-    path: "/authManage/roleList",
-    name: "roleList",
-    meta: {
-      title: "角色列表",
-      code: "ROLELIST",
+    {
+      path: "/authManage/roleList",
+      name: "roleList",
+      meta: {
+        title: "角色列表",
+        code: "ROLELIST",
+      },
+      component: () => import("../views/authManage/roleList.vue"),
     },
-    component: () => import("../views/authManage/roleList.vue"),
-  },
-  {
-    path: "/authManage/addRole",
-    name: "addRole",
-    meta: {
-      title: "新增角色",
-      code: "ADDUPDATEROLE",
+    {
+      path: "/authManage/addRole",
+      name: "addRole",
+      meta: {
+        title: "新增角色",
+        code: "ADDUPDATEROLE",
+      },
+      component: () => import("../views/authManage/addRole.vue"),
     },
-    component: () => import("../views/authManage/addRole.vue"),
-  },
-  {
-    path: "/cargoManage/cargoList",
-    name: "cargoList",
-    meta: {
-      title: "货种列表",
-      code: "CARGOLIST",
+    {
+      path: "/cargoManage/cargoList",
+      name: "cargoList",
+      meta: {
+        title: "货种列表",
+        code: "CARGOLIST",
+      },
+      component: () => import("../views/cargoManage/cargoList.vue"),
     },
-    component: () => import("../views/cargoManage/cargoList.vue"),
-  },
-];
+  ],
+});
 
 export const asyncRouterList = [
   {

src/store/index.js

@@ -62,13 +62,9 @@ const store = createStore({
     GetUserPermission({ commit }, loginAccountId) {
       return new Promise((resolve, reject) => {
         api.getPermissionByUserId({ loginAccountId }).then((e) => {
-          let arr = e.data.result;
+          let arr = e.data.result || [];
           commit("setUserPermissionData", arr);
-          asyncRouterList.forEach((item) => {
-            if (arr.indexOf(item.meta.code) != -1) {
-              router.addRoute(item);
-            }
-          });
+          localStorage.setItem("rolePermission", arr);
           let data = [];
           for (let i of menuData) {
             if (i.title == "航次") {

src/views/index/Login.vue

@@ -104,15 +104,27 @@ export default {
               message: res.data.msg,
               type: "success",
             });
-            let { userId, userName, phone, contactName, loginAccountId } =
-              res.data.result;
+            let {
+              userId,
+              userName,
+              phone,
+              contactName,
+              loginAccountId,
+              rolePermission,
+            } = res.data.result;
             localStorage.setItem("userId", userId);
             localStorage.setItem("userName", userName);
             localStorage.setItem("phone", phone);
             localStorage.setItem("contactName", contactName);
             localStorage.setItem("userType", 1);
             localStorage.setItem("loginAccountId", loginAccountId);
+            localStorage.setItem("rolePermission", rolePermission);
             store.commit("changeLogin", true);
+            store.dispatch(
+              "GetBasePermissionData",
+              localStorage.loginAccountId
+            );
+            store.dispatch("GetUserPermission", localStorage.loginAccountId);
             router.replace({ path: "/voyage/voyageList" });
           } else {
             ElNotification.error({