移除use-permission多余方法,移动MenuIcon文件

This commit is contained in:
洛洛希雅Lolosia 2023-06-25 13:40:51 +08:00
parent 30941f2433
commit e072be8dcb
7 changed files with 13 additions and 151 deletions

View File

@ -1,154 +1,15 @@
import NProgress from 'nprogress' import NProgress from 'nprogress'
import type { RouteRawConfig, RouterTypes, rawConfig } from '~/basic'
import type { RouteRecordName } from 'vue-router' import type { RouteRecordName } from 'vue-router'
/**
*
* @param:menuList
* return
*/
// @ts-ignore
import Layout from '@/layout/index.vue' import Layout from '@/layout/index.vue'
/*
*
* */
import router, { asyncRoutes, constantRoutes } from '@/router' import router, { asyncRoutes, constantRoutes } from '@/router'
//进度条
import 'nprogress/nprogress.css' import 'nprogress/nprogress.css'
import { useBasicStore } from '@/store/basic' import { useBasicStore } from '@/store/basic'
import { isArray } from 'xe-utils' import { isArray } from 'xe-utils'
const buttonCodes: Array<Number> = [] //按钮权限 //从数据库设置文本路由
interface menuRow { export function setRouterFromDatabase(menuList) {
category: number
code: number
children: RouterTypes
}
export const filterAsyncRoutesByMenuList = (menuList) => {
const filterRouter: RouterTypes = []
menuList.forEach((route: menuRow) => {
//button permission
if (route.category === 3) {
buttonCodes.push(route.code)
} else {
//generator every router item by menuList
const itemFromReqRouter = getRouteItemFromReqRouter(route)
if (route.children?.length) {
//judge the type is router or button
itemFromReqRouter.children = filterAsyncRoutesByMenuList(route.children)
}
filterRouter.push(itemFromReqRouter)
}
})
return filterRouter
}
const getRouteItemFromReqRouter = (route): RouteRawConfig => {
const tmp: rawConfig = { meta: { title: '' } }
const routeKeyArr = ['path', 'component', 'redirect', 'alwaysShow', 'name', 'hidden']
const metaKeyArr = ['title', 'activeMenu', 'elSvgIcon', 'icon']
// @ts-ignore
const modules = import.meta.glob('../views/**/**.vue')
//generator routeKey
routeKeyArr.forEach((fItem) => {
if (fItem === 'component') {
if (route[fItem] === 'Layout') {
tmp[fItem] = Layout
} else {
//has error , i will fix it through plugins
//tmp[fItem] = () => import(`@/views/permission-center/test/TestTableQuery.vue`)
tmp[fItem] = modules[`../views/${route[fItem]}`]
}
} else if (fItem === 'path' && route.parentId === 0) {
tmp[fItem] = `/${route[fItem]}`
} else if (['hidden', 'alwaysShow'].includes(fItem)) {
tmp[fItem] = !!route[fItem]
} else if (['name'].includes(fItem)) {
tmp[fItem] = route['code']
} else if (route[fItem]) {
tmp[fItem] = route[fItem]
}
})
//generator metaKey
metaKeyArr.forEach((fItem) => {
if (route[fItem] && tmp.meta) tmp.meta[fItem] = route[fItem]
})
//route extra insert
if (route.extra) {
Object.entries(route.extra.parse(route.extra)).forEach(([key, value]) => {
if (key === 'meta' && tmp.meta) {
tmp.meta[key] = value
} else {
tmp[key] = value
}
})
}
return tmp as RouteRawConfig
}
/**
*
* @param routes asyncRoutes
* @param roles
* return
*/
export function filterAsyncRoutesByRoles(routes, roles) {
const res: RouterTypes = []
routes.forEach((route) => {
const tmp: RouteRawConfig = { ...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) {
tmp.children = filterAsyncRoutesByRoles(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
function hasPermission(roles, route) {
if (route?.meta?.roles) {
return roles?.some((role) => route.meta.roles.includes(role))
} else {
return true
}
}
/**
* code数组
* @param codes code数组
* @param codesRoutes
* return
*/
export function filterAsyncRouterByCodes(codesRoutes, codes) {
const filterRouter: RouterTypes = []
codesRoutes.forEach((routeItem: RouteRawConfig) => {
if (hasCodePermission(codes, routeItem)) {
if (routeItem.children) routeItem.children = filterAsyncRouterByCodes(routeItem.children, codes)
filterRouter.push(routeItem)
}
})
return filterRouter
}
function hasCodePermission(codes, routeItem) {
if (routeItem.meta?.code) {
return codes.includes(routeItem.meta.code) || routeItem.hidden
} else {
return true
}
}
//过滤异步路由
export function filterAsyncRouter({ menuList, roles, codes }: { menuList; roles?; codes? }) {
const basicStore = useBasicStore() const basicStore = useBasicStore()
const accessRoutes = menuList const accessRoutes = menuList
// 与项目兼容,移除权限筛选部分,这一部分在公司项目中为后端处理。
// let accessRoutes: RouterTypes = []
// const permissionMode = basicStore.settings?.permissionMode
// if (permissionMode === 'rbac') {
// accessRoutes = filterAsyncRoutesByMenuList(menuList) //by menuList
// } else if (permissionMode === 'roles') {
// accessRoutes = filterAsyncRoutesByRoles(roleCodeRoutes, roles) //by roles
// } else {
// accessRoutes = filterAsyncRouterByCodes(roleCodeRoutes, codes) //by codes
// }
// @ts-ignore // @ts-ignore
const views = import.meta.glob('../views/**/*.vue') as Record<string, () => Promise<Component>> const views = import.meta.glob('../views/**/*.vue') as Record<string, () => Promise<Component>>
@ -164,7 +25,8 @@ export function filterAsyncRouter({ menuList, roles, codes }: { menuList; roles?
item.component = async () => { item.component = async () => {
let component let component
try { try {
component = await views[url]() component = await views[url]?.()
if (!component) throw new Error(`找不到文件${url}`)
} catch (e) { } catch (e) {
console.error(e) console.error(e)
component = await import('../views/error-page/404.vue') component = await import('../views/error-page/404.vue')
@ -175,11 +37,13 @@ export function filterAsyncRouter({ menuList, roles, codes }: { menuList; roles?
if (isArray(item.children)) scanRouter(item.children) if (isArray(item.children)) scanRouter(item.children)
} }
} }
scanRouter(accessRoutes) scanRouter(accessRoutes)
accessRoutes.forEach((route) => router.addRoute(route)) accessRoutes.forEach((route) => router.addRoute(route))
asyncRoutes.forEach((item) => router.addRoute(item)) asyncRoutes.forEach((item) => router.addRoute(item))
basicStore.setFilterAsyncRoutes(accessRoutes) basicStore.setFilterAsyncRoutes(accessRoutes)
} }
//重置路由 //重置路由
export function resetRouter() { export function resetRouter() {
//移除之前存在的路由 //移除之前存在的路由
@ -191,6 +55,7 @@ export function resetRouter() {
//新增constantRoutes //新增constantRoutes
constantRoutes.forEach((feItem) => router.addRoute(feItem)) constantRoutes.forEach((feItem) => router.addRoute(feItem))
} }
//重置登录状态 //重置登录状态
export function resetState() { export function resetState() {
resetRouter() resetRouter()
@ -200,8 +65,7 @@ export function resetState() {
//刷新路由 //刷新路由
export function freshRouter(data) { export function freshRouter(data) {
resetRouter() resetRouter()
filterAsyncRouter(data) setRouterFromDatabase(data)
// location.reload()
} }
NProgress.configure({ showSpinner: false }) NProgress.configure({ showSpinner: false })

View File

@ -14,7 +14,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import MenuIcon from "@/layout/sidebar/MenuIcon.vue"; import MenuIcon from "@/components/MenuIcon.vue";
import { useDebuggerStore } from "@/store/debuger"; import { useDebuggerStore } from "@/store/debuger";
const store = useDebuggerStore() const store = useDebuggerStore()

View File

@ -28,7 +28,7 @@
import { ref } from 'vue' import { ref } from 'vue'
import { resolve } from 'path-browserify' import { resolve } from 'path-browserify'
import Link from './Link.vue' import Link from './Link.vue'
import MenuIcon from './MenuIcon.vue' import MenuIcon from '../../components/MenuIcon.vue'
import type { RouteRawConfig } from '~/basic' import type { RouteRawConfig } from '~/basic'
import { isExternal } from '@/hooks/use-layout' import { isExternal } from '@/hooks/use-layout'
import { langTitle } from '@/hooks/use-common' import { langTitle } from '@/hooks/use-common'

View File

@ -1,5 +1,5 @@
import router from '@/router' import router from '@/router'
import { filterAsyncRouter, progressClose, progressStart } from '@/hooks/use-permission' import { progressClose, progressStart, setRouterFromDatabase } from '@/hooks/use-permission'
import { useBasicStore } from '@/store/basic' import { useBasicStore } from '@/store/basic'
import { getMyInfo, getMyRole } from '@/api/user' import { getMyInfo, getMyRole } from '@/api/user'
import { langTitle } from '@/hooks/use-common' import { langTitle } from '@/hooks/use-common'
@ -26,7 +26,7 @@ router.beforeEach(async (to) => {
const [userData, userRole] = await Promise.all([getMyInfo(), getMyRole()]) const [userData, userRole] = await Promise.all([getMyInfo(), getMyRole()])
const routes = await getRouterList({ roleId: userRole.roleId }) const routes = await getRouterList({ roleId: userRole.roleId })
//3.动态路由权限筛选 //3.动态路由权限筛选
filterAsyncRouter({ menuList: routes }) setRouterFromDatabase(routes)
//4.保存用户信息到store //4.保存用户信息到store
basicStore.setUserInfo({ basicStore.setUserInfo({
userInfo: userData, userInfo: userData,
@ -37,7 +37,6 @@ router.beforeEach(async (to) => {
return { ...to, replace: true } return { ...to, replace: true }
} catch (e) { } catch (e) {
console.error(`route permission error${e}`) console.error(`route permission error${e}`)
basicStore.resetState()
progressClose() progressClose()
return `/500?redirect=${to.path}` return `/500?redirect=${to.path}`
} }

View File

@ -79,7 +79,7 @@
import { doDelete, getList } from "@/api/userManagement"; import { doDelete, getList } from "@/api/userManagement";
import Edit from "./components/UserManagementEdit.vue"; import Edit from "./components/UserManagementEdit.vue";
import { sha1 } from "hash.js"; import { sha1 } from "hash.js";
import MenuIcon from "@/layout/sidebar/MenuIcon.vue"; import MenuIcon from "@/components/MenuIcon.vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import RightNavSearchInput from "@/views/system/userManagement/components/RightNavSearchInput.vue"; import RightNavSearchInput from "@/views/system/userManagement/components/RightNavSearchInput.vue";
import { useSystemStore } from "@/store/system"; import { useSystemStore } from "@/store/system";

View File

@ -38,7 +38,6 @@
<script setup lang="ts"> <script setup lang="ts">
import AvatarEdit from "@/views/user/profile/components/AvatarEditor.vue"; import AvatarEdit from "@/views/user/profile/components/AvatarEditor.vue";
import UserImage from "@/assets/layout/user.png"; import UserImage from "@/assets/layout/user.png";
import MenuIcon from "@/components/MenuIcon.vue";
const showAvatarEditor = ref(false); const showAvatarEditor = ref(false);
const userInfo = toRef(useBasicStore(), "userInfo"); const userInfo = toRef(useBasicStore(), "userInfo");