权限菜单控制

src/hooks/permission.ts

@@ -1,5 +1,6 @@
-import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
-import { useUserStore } from '@/store';
+import { RouteLocationNormalized, RouteRecordRaw } from "vue-router";
+import { useUserStore } from "@/store";
+import { getUserInfo, getUserResources } from "@/utils/auth";
 
 export default function usePermission() {
   const userStore = useUserStore();
@@ -7,8 +8,18 @@ export default function usePermission() {
     accessRouter(route: RouteLocationNormalized | RouteRecordRaw) {
       //遍历userStore.resource
       let isok = false;
+      let user = getUserResources();
+      let jsonObject = {};
+      let resurces: any;
       if (userStore.resources) {
-        userStore.resources.forEach(r => {
+        resurces = userStore.resources;
+      } else {
+        if (user) {
+          resurces = JSON.parse(user);
+        }
+      }
+      if (resurces) {
+        resurces.forEach(r => {
           if ((r.menuType == 0 || r.menuType == 3) && (route.name == r.component || route.path == r.component)) {
             isok = true;
           }
@@ -24,13 +35,13 @@ export default function usePermission() {
       }
 
     },
-    findFirstPermissionRoute(_routers: any, role = 'admin') {
+    findFirstPermissionRoute(_routers: any, role = "admin") {
       const cloneRouters = [..._routers];
       while (cloneRouters.length) {
         const firstElement = cloneRouters.shift();
         if (
           firstElement?.meta?.roles?.find((el: string[]) => {
-            return el.includes('*') || el.includes(role);
+            return el.includes("*") || el.includes(role);
           })
         )
           return { name: firstElement.name };
@@ -39,7 +50,7 @@ export default function usePermission() {
         }
       }
       return null;
-    },
+    }
     // You can add any rules you want
   };
 }

src/store/modules/user/index.ts

@@ -5,7 +5,7 @@ import {
   getUserInfo,
   LoginData,
 } from '@/api/user';
-import { setToken, clearToken,setUserInfo } from '@/utils/auth';
+import { setToken, clearToken,setUserInfo,setUserResources } from '@/utils/auth';
 import { removeRouteListener } from '@/utils/route-listener';
 import { UserState } from './types';
 import useAppStore from '../app';
@@ -73,6 +73,7 @@ const useUserStore = defineStore('user', {
         };
         this.resources=res.data.resources;
         setUserInfo(JSON.stringify(userInfo));
+        setUserResources(JSON.stringify(this.resources))
       } catch (err) {
         clearToken();
         throw err;

src/utils/auth.ts

@@ -1,6 +1,7 @@
 const TOKEN_KEY = 'token';
 const Authorization = 'Authorization';
 const UserInfo = 'userInfo';
+const UserResources='userResources'
 
 const isLogin = () => {
   return !!localStorage.getItem(TOKEN_KEY);
@@ -35,4 +36,12 @@ const setUserInfo = (info: string) => {
   localStorage.setItem(UserInfo, info);
 };
 
-export { isLogin, getToken, setToken, clearToken,getAuthorization, setAuthorization, getUserInfo, setUserInfo};
+const getUserResources = () => {
+  return localStorage.getItem(UserResources);
+};
+
+const setUserResources = (info: string) => {
+  localStorage.setItem(UserResources, info);
+};
+
+export { isLogin, getToken, setToken, clearToken,getAuthorization, setAuthorization, getUserInfo, setUserInfo,setUserResources,getUserResources};