Navigation guards for Inertia JS + vue 3 + typescript

AppLink.vue

<script lang="ts">
  import type { Method } from '@inertiajs/inertia'
  import type { PropType } from 'vue'
  import type { RouteParamsWithQueryOverload, Config } from 'ziggy-js'

  import { h } from 'vue'
  import { Inertia, mergeDataIntoQueryString, shouldIntercept } from '@inertiajs/inertia'
  import { getRouteGuard, BeforeRouteLeave, AfterRouteLeave } from '~/compostables/router'

  type QueryStringArrayFormat = 'brackets' | 'indices'

  const noop = () => ({})

  export default defineComponent({
    props: {
      as: {
        type: String,
        default: 'a',
      },
      data: {
        type: Object,
        default: () => ({}),
      },
      to: {
        type: String,
      },
      params: {
        type: Object as PropType<RouteParamsWithQueryOverload>,
      },
      config: {
        type: Object as PropType<Config>,
      },
      absolute: {
        type: Boolean,
      },
      href: {
        type: String,
      },
      method: {
        type: String,
        default: 'get',
      },
      replace: {
        type: Boolean,
        default: false,
      },
      preserveScroll: {
        type: Boolean,
        default: false,
      },
      preserveState: {
        type: Boolean,
        default: null,
      },
      only: {
        type: Array as PropType<Array<string>>,
        default: () => [] as Array<string>,
      },
      confirm: {
        type: Function as PropType<() => Promise<boolean>>,
      },
      headers: {
        type: Object,
        default: () => ({}),
      },
      queryStringArrayFormat: {
        type: String as PropType<QueryStringArrayFormat>,
        default: 'brackets',
      },
    },
    setup(props, { slots, attrs }) {
      return () => {
        const element = props.as.toLowerCase()
        const method = props.method.toLowerCase() as Method
        const [href, data] = mergeDataIntoQueryString(
          method,
          (props.to ? route(props.to, props.params, props.absolute, props.config) : props.href) || '',
          props.data,
          props.queryStringArrayFormat,
        )

        if (element === 'a' && method !== 'get') {
          console.warn(
            `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
          )
        }

        return h(
          element,
          {
            ...attrs,
            ...(element === 'a' ? { href } : {}),
            onClick: async (event: MouseEvent) => {
              // ignore warn
              if (shouldIntercept(event as any)) {
                event.preventDefault()

                let gaurdOptions = { href, data, method, replace: props.replace }
                const beforeRouteLeave = getRouteGuard('beforeRouteLeave') as BeforeRouteLeave
                if (beforeRouteLeave && beforeRouteLeave.guard() === true) {
                  const result = await beforeRouteLeave.confirm(gaurdOptions, event)
                  if (result === false) {
                    return
                  }
                }

                if (!props.confirm || (await props.confirm())) {
                  const afterRouteLeaveGuard = getRouteGuard('afterRouteLeave') as AfterRouteLeave

                  Inertia.visit(href, {
                    data: data,
                    method: method,
                    replace: props.replace,
                    preserveScroll: props.preserveScroll,
                    preserveState: props.preserveState ?? method !== 'get',
                    //only: props.only,
                    headers: props.headers,
                    onCancelToken: (attrs.onCancelToken || noop) as any,
                    onBefore: (attrs.onBefore || noop) as any,
                    onStart: (attrs.onStart || noop) as any,
                    onProgress: (attrs.onProgress || noop) as any,
                    onFinish: (...args) => {
                      if (afterRouteLeaveGuard !== undefined) {
                        afterRouteLeaveGuard({ ...gaurdOptions, ...args }, event)
                      }

                      if (attrs.onFinish && typeof attrs.onFinish === 'function') {
                        attrs.onFinish(...args)
                      }
                    },
                    onCancel: (attrs.onCancel || noop) as any,
                    onSuccess: (attrs.onSuccess || noop) as any,
                    onError: (attrs.onError || noop) as any,
                  })
                }
              }
            },
          },
          slots,
        )
      }
    },
  })
</script>

router.ts

import { onMounted, onBeforeUnmount } from 'vue'

interface GaurdStore {
  beforeRouteLeave?: BeforeRouteLeave
  afterRouteLeave?: AfterRouteLeave
}

export type RouterGuard = (event?: BeforeUnloadEvent) => boolean | undefined
export type ConfirmGuard = (options?: any, event?: MouseEvent) => Promise<boolean | undefined> | boolean | undefined
export type BeforeRouteLeave = { guard: RouterGuard; confirm: ConfirmGuard }
export type AfterRouteLeave = (options?: any, event?: MouseEvent) => void

const gaurds: GaurdStore = {}

export function getRouteGuard(type: keyof GaurdStore): AfterRouteLeave | BeforeRouteLeave | undefined {
  return gaurds[type] ? gaurds[type] : undefined
}

export function onBeforeRouteLeave(guard: RouterGuard, confirm: ConfirmGuard): void {
  const onBeforeUnload = (event: BeforeUnloadEvent) => {
    if (gaurds.beforeRouteLeave && gaurds.beforeRouteLeave.guard(event) == true) {
      event.preventDefault()
      event.returnValue = ''
    }
  }

  onBeforeUnmount(() => {
    window.removeEventListener('beforeunload', onBeforeUnload)
    delete gaurds.beforeRouteLeave
  })

  onMounted(() => {
    gaurds.beforeRouteLeave = { guard, confirm }
    window.addEventListener('beforeunload', onBeforeUnload)
  })
}

export function onAfterRouteLeave(guard: RouterGuard): void {
  onBeforeUnmount(() => {
    delete gaurds.afterRouteLeave
  })

  onMounted(() => {
    gaurds.afterRouteLeave = guard
  })
}

TestPage.vue

<script lang="ts" setup>
  import { onBeforeRouteLeave } from '~/components/router.ts'

  const dirty = ref(false)

  onBeforeRouteLeave(
    () => dirty.value,
    async () => {
      return window.confirm("Do you really want to leave?")
    },
  )
</script>

<template>
  <h1>Test</h1>
  <AppLink :href="route('home')">App Link</AppLink>
  <a href="https://google.com/">Google</a>
</template>