component-lib/projects/common/utils/permission.ts

import {type RouteRecordRaw} from 'vue-router'
import {ElMessage} from 'element-plus'
import {filterRouters, getMenuChildren, getBtnAuth, getQueryString} from './index'
import {saveCommonRoute} from '@common/src/api';
import {COMMON_APP} from '@common/src/constants';
import {useDebounceFn} from '@vueuse/core'


export interface ILoadType {
    routePath: any
    storeMAppPath: any
    hookProgressPath: any
    hookTitlePath: any
    storeMPermissionPath: any
    hookLoadingPath: any
    constantsPath: any
    storeMUserPath: any
    apiLoginPath: any
}

export const loginLoad = async (sys_code, pathModule: ILoadType) => {
    const router = await pathModule.routePath
    const useAppStoreWithOut = await pathModule.storeMAppPath
    const useTitle = await pathModule.hookProgressPath
    const useNProgress = await pathModule.hookProgressPath
    const usePermissionStoreWithOut = await pathModule.storeMPermissionPath
    const usePageLoading = await pathModule.hookLoadingPath
    const NO_REDIRECT_WHITE_LIST = await pathModule.constantsPath
    const useUserStoreWithOut = await pathModule.storeMUserPath
    const {codeLogin, getAuthBtn, getMenuList} = await pathModule.apiLoginPath

    const {start, done} = useNProgress()

    const {loadStart, loadDone} = usePageLoading()

    const SYS_CODE = sys_code

    // 防抖处理函数
    const debounceFn = useDebounceFn(async (to, flag) => {
        // 埋点计数
        if (COMMON_APP.includes(to.fullPath)) {
            await saveCommonRoute({
                "appCode": flag,
                "routePath": to.fullPath
            })
        }
    }, 100)

    router.beforeEach(async (to, _from, next) => {
        start()
        loadStart()
        const permissionStore = usePermissionStoreWithOut()
        const appStore = useAppStoreWithOut()
        const userStore = useUserStoreWithOut()
        // const queryParams = new URLSearchParams(window.location.search)
        const code = getQueryString('code')

        const flag = getQueryString('flag') || sessionStorage.getItem('flag')

        appStore.setMenuTheme('#373f4e')

        debounceFn(to, flag)

        if (code && flag) {
            if (!userStore.getToken) {
                const state = getQueryString('state')
                const deptId = JSON.parse(state as string)?.deptId
                const {data} = await codeLogin({system: flag, code, deptId})
                userStore.setUserInfo(data)
                userStore.setToken(data.accessToken)
                sessionStorage.setItem('flag', flag || '')

                // 门户页进来页面跳转进入该方法
                await getRouter()

                // queryParams.delete('code')
                // queryParams.delete('flag')
                // queryParams.delete('state')
                const newUrl = `${window.location.pathname}`
                window.history.replaceState({}, '', newUrl)
                next()
            } else {
                if (NO_REDIRECT_WHITE_LIST.indexOf(to.path) !== -1) {
                    next()
                } else {
                    next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
                }
            }
        } else {
            if (userStore.getUserInfo) {
                if (to.path === '/login') {
                    // next({path: '/'})
                    ElMessage.warning('暂不支持直接键入登录页')
                    next(false)
                } else {
                    if (permissionStore.getIsAddRouters) {
                        next()
                        return
                    }

                    // 开发者可根据实际情况进行修改
                    const roleRouters = userStore.getRoleRouters || []

                    // 是否使用动态路由
                    if (appStore.getDynamicRouter) {
                        appStore.serverDynamicRouter
                            ? await permissionStore.generateRoutes(
                                'server',
                                roleRouters as AppCustomRouteRecordRaw[]
                            )
                            : await permissionStore.generateRoutes('frontEnd', roleRouters as string[])
                    } else {
                        await permissionStore.generateRoutes('static')
                    }

                    permissionStore.getAddRouters.forEach((route) => {
                        console.log(route)
                        router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表
                    })
                    permissionStore.setIsAddRouters(true)
                    next(to.path === '/' ? permissionStore.addRouters[0].path : to.fullPath)
                }
            } else {
                if (NO_REDIRECT_WHITE_LIST.indexOf(to.path) !== -1) {
                    next()
                } else {
                    // userStore.setRoleRouters(routers)
                    const roleRouters = userStore.getRoleRouters || []
                    await permissionStore.generateRoutes('frontEnd', roleRouters as string[])
                    permissionStore.getAddRouters.forEach((route) => {
                        router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表
                    })
                    permissionStore.setIsAddRouters(true)
                    console.log(permissionStore.addRouters)

                    // next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
                    // next(to.path === '/' ? permissionStore.addRouters[0].path : to.fullPath)
next()
                }
            }
        }
    })

// 获取角色信息
    const getRouter = async () => {
        const permissionStore = usePermissionStoreWithOut()
        const appStore = useAppStoreWithOut()
        const userStore = useUserStoreWithOut()
        const res = await getMenuList({})
        const btn = await getAuthBtn({})
        if (res) {
            const routers = filterRouters(getMenuChildren(res.data, SYS_CODE)) || []
            const btnAuth = getBtnAuth(btn.data) || []
            if (!routers.length) {
                ElMessage.error('暂无菜单权限')
                return
            }
            userStore.setRoleRouters(routers)
            userStore.setBtnAuth(btnAuth)
            appStore.getDynamicRouter && appStore.getServerDynamicRouter
                ? await permissionStore.generateRoutes('server', routers).catch(() => {
                })
                : await permissionStore.generateRoutes('frontEnd', routers).catch(() => {
                })

            permissionStore.getAddRouters.forEach((route) => {
                router.addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
            })
            permissionStore.setIsAddRouters(true)

            // 获取从门户页跳转过来携带的state参数中的path 有该path 说明是门户页跳转常用功能
            const state = getQueryString('state')
            const path = JSON.parse(state as string)?.path

            // 重定向到项目的第一个路由
            const redirectPath = await getPath(permissionStore.addRouters, firstPath)

            router.push({
                // path: toRaw(permissionStore.addRouters[0]).path
                // path: path ? path : toRaw(permissionStore.addRouters[0]).path
                path: path ? path : redirectPath
            })
        }
    }

    // 获取第一个显示的菜单

    let firstPath = ''

    const getPath = async (routers: AppRouteRecordRaw[], path: string) => {
        // 过滤掉 非展示的页面
        const arr = routers.filter(i => i.meta.hidden !== true)

        if (!arr.length) {
            ElMessage.error('暂无菜单权限')
            return '/404'
        }
        firstPath = `${path}${arr[0].path.charAt(0) === '/' ? '' : '/'}${arr[0].path}`
        if (arr[0].children) {
            return await getPath(arr[0].children, firstPath)
        }
        return firstPath
    }


    router.afterEach((to) => {
        useTitle(to?.meta?.title as string)
        done() // 结束Progress
        loadDone()
    })
}