权限菜单控制

yinbangzhong

2024-08-06 7b8ce4e0ab61b855dc2453ae23011c2c9abfe44d

权限菜单控制

 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 @@
    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 @@
      }

    },
    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 @@
        }
      }
      return null;
    },
    }
    // You can add any rules you want
  };
}

 src/store/modules/user/index.ts

@@ -5,7 +5,7 @@
  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 @@
        };
        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 @@
  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};