adjust navigation guard signature

Author: yyx990803

examples/auth-flow/app.js

@@ -9,11 +9,11 @@ import About from './components/About.vue'
 import Dashboard from './components/Dashboard.vue'
 import Login from './components/Login.vue'
 
-function requireAuth (route, redirect, next) {
+function requireAuth (to, from, next) {
   if (!auth.loggedIn()) {
-    redirect({
+    next({
       path: '/login',
-      query: { redirect: route.fullPath }
+      query: { redirect: to.fullPath }
     })
   } else {
     next()
@@ -28,9 +28,9 @@ const router = new VueRouter({
     { path: '/dashboard', component: Dashboard, beforeEnter: requireAuth },
     { path: '/login', component: Login },
     { path: '/logout',
-      beforeEnter (route, redirect) {
+      beforeEnter (to, from, next) {
         auth.logout()
-        redirect('/')
+        next('/')
       }
     }
   ]

examples/navigation-guards/app.js

@@ -10,14 +10,17 @@ const Bar = { template: '<div>bar</div>' }
 /**
  * Signatre of all route guards:
  * @param {Route} route
- * @param {Function} redirect - redirect to another route
- * @param {Function} next - confirm the route
+ * @param {Function} next - confirm the navigation
+ * @param {Function} redirect - cancel and redirect to another route
+ * @param {Function} abort - abort the navigation
  */
-function guardRoute (route, redirect, next) {
-  if (window.confirm(`Navigate to ${route.path}?`)) {
+function guardRoute (to, from, next) {
+  if (window.confirm(`Navigate to ${to.path}?`)) {
     next()
   } else if (window.confirm(`Redirect to /baz?`)) {
-    redirect('/baz')
+    next('/baz')
+  } else {
+    next(false)
   }
 }
 
@@ -32,9 +35,11 @@ const Baz = {
       <button @click="saved = true">save</button>
     </div>
   `,
-  beforeRouteLeave (route, redirect, next) {
+  beforeRouteLeave (to, from, next) {
     if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) {
       next()
+    } else {
+      next(false)
     }
   }
 }
@@ -47,7 +52,7 @@ const Qux = {
     }
   },
   template: `<div>{{ msg }}</div>`,
-  beforeRouteEnter (route, redirect, next) {
+  beforeRouteEnter (to, from, next) {
     // Note that enter hooks do not have access to `this`
     // because it is called before the component is even created.
     // However, we can provide a callback to `next` which will
@@ -92,9 +97,9 @@ const router = new VueRouter({
   ]
 })
 
-router.beforeEach((route, redirect, next) => {
-  if (route.matched.some(m => m.meta.needGuard)) {
-    guardRoute(route, redirect, next)
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(m => m.meta.needGuard)) {
+    guardRoute(to, from, next)
   } else {
     next()
   }

src/history/base.js

@@ -4,7 +4,7 @@ import type VueRouter from '../index'
 import { warn } from '../util/warn'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
-import { createRoute, isSameRoute } from '../util/route'
+import { START, isSameRoute } from '../util/route'
 
 export class History {
   router: VueRouter;
@@ -23,9 +23,7 @@ export class History {
     this.router = router
     this.base = normalizeBase(base)
     // start with a route object that stands for "nowhere"
-    this.current = createRoute(null, {
-      path: '__vue_router_init__'
-    })
+    this.current = START
     this.pending = null
   }
 
@@ -43,7 +41,8 @@ export class History {
   }
 
   confirmTransition (route: Route, cb: Function) {
-    if (isSameRoute(route, this.current)) {
+    const current = this.current
+    if (isSameRoute(route, current)) {
       this.ensureURL()
       return
     }
@@ -65,15 +64,28 @@ export class History {
     )
 
     this.pending = route
-    const redirect = location => this.push(location)
-    const iterator = (hook, next) => hook(route, redirect, next)
+    const iterator = (hook, next) => {
+      if (this.pending !== route) return
+      hook(route, current, (to: any) => {
+        if (to === false) {
+          // next(false) -> abort navigation, ensure current URL
+          this.ensureURL()
+        } else if (typeof to === 'string' || typeof to === 'object') {
+          // next('/') or next({ path: '/' }) -> redirect
+          this.push(to)
+        } else {
+          // confirm transition and pass on the value
+          next(to)
+        }
+      })
+    }
 
     runQueue(queue, iterator, () => {
       const postEnterCbs = []
       // wait until async components are resolved before
       // extracting in-component enter guards
       runQueue(extractEnterGuards(activated, postEnterCbs), iterator, () => {
-        if (isSameRoute(route, this.pending)) {
+        if (this.pending === route) {
           this.pending = null
           cb(route)
           this.router.app.$nextTick(() => {
@@ -146,12 +158,14 @@ function extractEnterGuards (matched: Array<RouteRecord>, cbs: Array<Function>):
   return flatMapComponents(matched, (def, _, match, key) => {
     const guard = def && def.beforeRouteEnter
     if (guard) {
-      return function routeEnterGuard (route, redirect, next) {
-        return guard(route, redirect, cb => {
-          next()
-          cb && cbs.push(() => {
-            cb(match.instances[key])
-          })
+      return function routeEnterGuard (to, from, next) {
+        return guard(to, from, cb => {
+          next(cb)
+          if (typeof cb === 'function') {
+            cbs.push(() => {
+              cb(match.instances[key])
+            })
+          }
         })
       }
     }
@@ -166,14 +180,15 @@ function resolveAsyncComponents (matched: Array<RouteRecord>): Array<?Function>
     // we want to halt the navigation until the incoming component has been
     // resolved.
     if (typeof def === 'function' && !def.options) {
-      return (route, redirect, next) => {
+      return (to, from, next) => {
         const resolve = resolvedDef => {
           match.components[key] = resolvedDef
           next()
         }
 
         const reject = reason => {
           warn(false, `Failed to resolve async component ${key}: ${reason}`)
+          next(false)
         }
 
         const res = def(resolve, reject)

src/util/route.js

@@ -23,6 +23,11 @@ export function createRoute (
   return Object.freeze(route)
 }
 
+// the starting route that represents the initial state
+export const START = createRoute(null, {
+  path: '/'
+})
+
 function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
   const res = []
   while (record) {
@@ -38,7 +43,9 @@ function getFullPath ({ path, query = {}, hash = '' }) {
 
 const trailingSlashRE = /\/$/
 export function isSameRoute (a: Route, b: ?Route): boolean {
-  if (!b) {
+  if (b === START) {
+    return a === b
+  } else if (!b) {
     return false
   } else if (a.path && b.path) {
     return (

test/e2e/specs/navigation-guards.js

@@ -77,9 +77,9 @@ module.exports = {
       .dismissAlert()
       .waitFor(100)
       .dismissAlert()
-      // url works
-      .assert.urlEquals('http://localhost:8080/navigation-guards/foo')
-      // but should not render anything
+      // should redirect to root
+      .assert.urlEquals('http://localhost:8080/navigation-guards/')
+      // and should not render anything
       .assert.elementNotPresent('.view')
 
     .url('http://localhost:8080/navigation-guards/foo')
@@ -91,9 +91,9 @@ module.exports = {
       .dismissAlert()
       .waitFor(100)
       .dismissAlert()
-      // url works
-      .assert.urlEquals('http://localhost:8080/navigation-guards/bar')
-      // but should not render anything
+      // should redirect to root
+      .assert.urlEquals('http://localhost:8080/navigation-guards/')
+      // and should not render anything
       .assert.elementNotPresent('.view')
 
     .url('http://localhost:8080/navigation-guards/bar')