chore: add back navigation info to guards

Author: userquin

packages/router/src/history/common.ts

@@ -48,6 +48,14 @@ export interface NavigationInformation {
   type: NavigationType
   direction: NavigationDirection
   delta: number
+  /**
+   * True if the navigation was triggered by the browser back button.
+   */
+  isBackBrowserButton?: boolean
+  /**
+   * True if the navigation was triggered by the browser forward button.
+   */
+  isForwardBrowserButton?: boolean
 }
 
 export interface NavigationCallback {

packages/router/src/navigation-api/index.ts

@@ -142,13 +142,14 @@ export function createNavigationApiRouter(options: RouterApiOptions): Router {
       leavingRecords.reverse(),
       'beforeRouteLeave',
       to,
-      from
+      from,
+      navigationInfo
     )
 
     // leavingRecords is already reversed
     for (const record of leavingRecords) {
       record.leaveGuards.forEach(guard => {
-        guards.push(guardToPromiseFn(guard, to, from))
+        guards.push(guardToPromiseFn(guard, to, from, { info: navigationInfo }))
       })
     }
 
@@ -162,7 +163,7 @@ export function createNavigationApiRouter(options: RouterApiOptions): Router {
     // check global guards beforeEach
     guards = []
     for (const guard of beforeGuards.list()) {
-      guards.push(guardToPromiseFn(guard, to, from))
+      guards.push(guardToPromiseFn(guard, to, from, { info: navigationInfo }))
     }
     guards.push(canceledNavigationCheck)
     await runGuardQueue(guards)
@@ -172,7 +173,8 @@ export function createNavigationApiRouter(options: RouterApiOptions): Router {
       updatingRecords,
       'beforeRouteUpdate',
       to,
-      from
+      from,
+      navigationInfo
     )
     guards.push(canceledNavigationCheck)
     await runGuardQueue(guards)
@@ -183,9 +185,15 @@ export function createNavigationApiRouter(options: RouterApiOptions): Router {
       if (record.beforeEnter) {
         if (isArray(record.beforeEnter)) {
           for (const beforeEnter of record.beforeEnter)
-            guards.push(guardToPromiseFn(beforeEnter, to, from))
+            guards.push(
+              guardToPromiseFn(beforeEnter, to, from, { info: navigationInfo })
+            )
         } else {
-          guards.push(guardToPromiseFn(record.beforeEnter, to, from))
+          guards.push(
+            guardToPromiseFn(record.beforeEnter, to, from, {
+              info: navigationInfo,
+            })
+          )
         }
       }
     }
@@ -202,6 +210,7 @@ export function createNavigationApiRouter(options: RouterApiOptions): Router {
       'beforeRouteEnter',
       to,
       from,
+      navigationInfo,
       runWithContext
     )
     guards.push(canceledNavigationCheck)
@@ -210,7 +219,7 @@ export function createNavigationApiRouter(options: RouterApiOptions): Router {
     // check global guards beforeResolve
     guards = []
     for (const guard of beforeResolveGuards.list()) {
-      guards.push(guardToPromiseFn(guard, to, from))
+      guards.push(guardToPromiseFn(guard, to, from, { info: navigationInfo }))
     }
     guards.push(canceledNavigationCheck)
     await runGuardQueue(guards)
@@ -634,9 +643,9 @@ export function createNavigationApiRouter(options: RouterApiOptions): Router {
               delta > 0
                 ? NavigationDirection.forward
                 : NavigationDirection.back,
-            delta /*,
+            delta,
             isBackBrowserButton: delta < 0,
-            isForwardBrowserButton: delta > 0*/,
+            isForwardBrowserButton: delta > 0,
           }
         } else if (
           event.navigationType === 'push' ||
@@ -711,9 +720,9 @@ export function createNavigationApiRouter(options: RouterApiOptions): Router {
       type: NavigationType.pop,
       direction:
         delta > 0 ? NavigationDirection.forward : NavigationDirection.back,
-      delta /*,
+      delta,
       isBackBrowserButton: delta < 0,
-      isForwardBrowserButton: delta > 0*/,
+      isForwardBrowserButton: delta > 0,
     }
 
     pendingLocation = to

packages/router/src/navigationGuards.ts

@@ -22,6 +22,7 @@ import { matchedRouteKey } from './injectionSymbols'
 import { RouteRecordNormalized } from './matcher/types'
 import { isESModule, isRouteComponent } from './utils'
 import { warn } from './warning'
+import { NavigationInformation } from './history/common'
 
 function registerGuard(
   record: RouteRecordNormalized,
@@ -106,27 +107,21 @@ export function onBeforeRouteUpdate(updateGuard: NavigationGuard) {
   registerGuard(activeRecord, 'updateGuards', updateGuard)
 }
 
-export function guardToPromiseFn(
-  guard: NavigationGuard,
-  to: RouteLocationNormalized,
-  from: RouteLocationNormalizedLoaded
-): () => Promise<void>
-export function guardToPromiseFn(
-  guard: NavigationGuard,
-  to: RouteLocationNormalized,
-  from: RouteLocationNormalizedLoaded,
-  record: RouteRecordNormalized,
-  name: string,
-  runWithContext: <T>(fn: () => T) => T
-): () => Promise<void>
+interface GuardToPromiseFnOptions {
+  record?: RouteRecordNormalized
+  name?: string
+  runWithContext?: <T>(fn: () => T) => T
+  info?: NavigationInformation
+}
+
 export function guardToPromiseFn(
   guard: NavigationGuard,
   to: RouteLocationNormalized,
   from: RouteLocationNormalizedLoaded,
-  record?: RouteRecordNormalized,
-  name?: string,
-  runWithContext: <T>(fn: () => T) => T = fn => fn()
+  options: GuardToPromiseFnOptions = {}
 ): () => Promise<void> {
+  const { record, name, runWithContext = fn => fn(), info } = options
+
   // keep a reference to the enterCallbackArray to prevent pushing callbacks if a new navigation took place
   const enterCallbackArray =
     record &&
@@ -179,7 +174,7 @@ export function guardToPromiseFn(
           record && record.instances[name!],
           to,
           from,
-          __DEV__ ? canOnlyBeCalledOnce(next, to, from) : next
+          __DEV__ ? canOnlyBeCalledOnce(next, to, from, info) : next
         )
       )
       let guardCall = Promise.resolve(guardReturn)
@@ -214,14 +209,19 @@ export function guardToPromiseFn(
 function canOnlyBeCalledOnce(
   next: NavigationGuardNext,
   to: RouteLocationNormalized,
-  from: RouteLocationNormalized
+  from: RouteLocationNormalized,
+  info?: NavigationInformation
 ): NavigationGuardNext {
   let called = 0
   return function () {
-    if (called++ === 1)
+    if (called++ === 1) {
+      const showInfo = info
+        ? ` (type=${info.type},direction=${info.direction},delta=${info.delta},back=${info.isBackBrowserButton === true},forward=${info.isForwardBrowserButton === true})`
+        : ''
       warn(
-        `The "next" callback was called more than once in one navigation guard when going from "${from.fullPath}" to "${to.fullPath}". It should be called exactly one time in each navigation guard. This will fail in production.`
+        `The "next" callback was called more than once in one navigation guard when going from "${from.fullPath}" to "${to.fullPath}${showInfo}". It should be called exactly one time in each navigation guard. This will fail in production.`
       )
+    }
     // @ts-expect-error: we put it in the original one because it's easier to check
     next._called = true
     if (called === 1) next.apply(null, arguments as any)
@@ -235,6 +235,7 @@ export function extractComponentsGuards(
   guardType: GuardType,
   to: RouteLocationNormalized,
   from: RouteLocationNormalizedLoaded,
+  info?: NavigationInformation,
   runWithContext: <T>(fn: () => T) => T = fn => fn()
 ) {
   const guards: Array<() => Promise<void>> = []
@@ -298,7 +299,12 @@ export function extractComponentsGuards(
         const guard = options[guardType]
         guard &&
           guards.push(
-            guardToPromiseFn(guard, to, from, record, name, runWithContext)
+            guardToPromiseFn(guard, to, from, {
+              record,
+              name,
+              runWithContext,
+              info,
+            })
           )
       } else {
         // start requesting the chunk already
@@ -334,7 +340,12 @@ export function extractComponentsGuards(
 
             return (
               guard &&
-              guardToPromiseFn(guard, to, from, record, name, runWithContext)()
+              guardToPromiseFn(guard, to, from, {
+                record,
+                name,
+                runWithContext,
+                info,
+              })()
             )
           })
         )

packages/router/src/router.ts

@@ -923,6 +923,7 @@ export function createRouter(options: RouterOptions): Router {
             'beforeRouteEnter',
             to,
             from,
+            undefined,
             runWithContext
           )
           guards.push(canceledNavigationCheck)

packages/router/src/typed-routes/navigation-guards.ts

@@ -6,6 +6,7 @@ import type {
 } from './route-location'
 import type { TypesConfig } from '../config'
 import type { NavigationFailure } from '../errors'
+import type { NavigationInformation } from '../history/common'
 import { ComponentPublicInstance } from 'vue'
 
 /**
@@ -25,7 +26,8 @@ export interface NavigationGuardWithThis<T> {
     to: RouteLocationNormalized,
     from: RouteLocationNormalizedLoaded,
     // intentionally not typed to make people use the return
-    next: NavigationGuardNext
+    next: NavigationGuardNext,
+    info?: NavigationInformation
   ): _Awaitable<NavigationGuardReturn>
 }
 
@@ -41,7 +43,8 @@ export interface _NavigationGuardResolved {
     to: RouteLocationNormalizedLoaded,
     from: RouteLocationNormalizedLoaded,
     // intentionally not typed to make people use the return
-    next: NavigationGuardNext
+    next: NavigationGuardNext,
+    info?: NavigationInformation
   ): _Awaitable<NavigationGuardReturn>
 }
 
@@ -53,7 +56,8 @@ export interface NavigationGuard {
     to: RouteLocationNormalized,
     from: RouteLocationNormalizedLoaded,
     // intentionally not typed to make people use the return
-    next: NavigationGuardNext
+    next: NavigationGuardNext,
+    info?: NavigationInformation
   ): _Awaitable<NavigationGuardReturn>
 }