resource-admin/src/router/router-guards.ts

import type { RouteRecordRaw } from 'vue-router'
import { isNavigationFailure, Router } from 'vue-router'
import { useUserStoreWidthOut } from '@/store/modules/user'
import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { storage } from '@/utils/storage'
import { PageEnum } from '@/enums/pageEnum'
import { ErrorPageRoute } from '@/router/base'
import { App } from 'vue'
import { useLoadingBar, useDialog } from 'naive-ui'
import { BaseRoute } from '@/router/base'

const LOGIN_PATH = PageEnum.BASE_LOGIN

const whitePathList = [LOGIN_PATH] // no redirect whitelist

const Loading = useLoadingBar()

export function createRouterGuards(router: Router, app: App) {
  const userStore = useUserStoreWidthOut()
  const asyncRouteStore = useAsyncRouteStoreWidthOut()
  router.beforeEach(async (to, from, next) => {
    Loading && Loading.start()
    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
      next(PageEnum.BASE_HOME)
      return
    }

    // Whitelist can be directly entered
    if (whitePathList.includes(to.path)) {
      next()
      return
    }

    const token = storage.get(ACCESS_TOKEN)
    // console.log(token, 'token')

    if (!token) {
      // You can access without permissions. You need to set the routing meta.ignoreAuth to true
      if (to.meta.ignoreAuth) {
        next()
        return
      }
      // redirect login page
      const redirectData: { path: string; replace: boolean; query?: any } = {
        path: LOGIN_PATH,
        replace: true
      }
      if (to.path) {
        redirectData.query = {
          ...redirectData.query,
          redirect: to.path
        }
      }
      next(redirectData)
      return
    }

    if (asyncRouteStore.getIsDynamicAddedRoute) {
      next()
      return
    }

    await userStore.GetInfo()
    const routes = await asyncRouteStore.generateRoutes()
    const isHasRoot = routes.find((item: any) => {
      return item.path == from.query?.redirect
    })
    const hasCurrentRoute = routes.find((item: any) => {
      return item.path == to.path
    })

    router.addRoute(BaseRoute)
    // // 动态添加可访问路由表
    // ;((routes as any) || []).forEach((item: any) => {
    //   // console.log(item, 'add route')
    //   router.addRoute(item as unknown as RouteRecordRaw)
    // })
    //添加404
    const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name)
    if (isErrorPage === -1) {
      router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw)
    }

    const redirectPath = (
      hasCurrentRoute ? to.path : isHasRoot ? from.query.redirect : PageEnum.BASE_HOME
    ) as string
    const redirect = decodeURIComponent(redirectPath)
    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
    asyncRouteStore.setDynamicAddedRoute(true)
    next(nextData)
    Loading && Loading.finish()
  })

  router.afterEach((to, _, failure) => {
    if (isNavigationFailure(failure)) {
      //console.log('failed navigation', failure)
    }
    const asyncRouteStore = useAsyncRouteStoreWidthOut()
    // 在这里设置需要缓存的组件名称
    const keepAliveComponents = asyncRouteStore.keepAliveComponents
    const currentComName: any = to.matched.find((item) => item.name == to.name)?.name
    if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
      // 需要缓存的组件
      keepAliveComponents.push(currentComName)
    } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
      // 不需要缓存的组件
      const index = asyncRouteStore.keepAliveComponents.findIndex((name) => name == currentComName)
      if (index != -1) {
        keepAliveComponents.splice(index, 1)
      }
    }
    asyncRouteStore.setKeepAliveComponents(keepAliveComponents)
    Loading && Loading.finish()
  })

  router.onError((error) => {})
}