diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" new file mode 100644 index 0000000000000000000000000000000000000000..7473d4b07127316bcb28869c2cfbd37ce4526210 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" @@ -0,0 +1,14 @@ +{ + "node_id": "vue-d9946cf901924a2ca1a649ad9866ed99", + "keywords": [ + "前置路由守卫" + ], + "children": [], + "export": [ + "exercises.json" + ], + "keywords_must": [ + "Vue" + ], + "keywords_forbid": [] +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" new file mode 100644 index 0000000000000000000000000000000000000000..0e960f6d314433c3bc3857bbcf7b86268737d279 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "5b5ba3fc48d449bdb1a8826803f7da5d" +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..4bd17d3d0498fc88999f0d7be4d794dd32a4d8b8 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md" @@ -0,0 +1,108 @@ +# 前置路由守卫 + +
小常识:
+
+ +你可以使用 router.beforeEach 注册一个全局前置守卫: + +```javascript +const router = createRouter({ ... }) + +router.beforeEach((to, from) => { + // ... + // 返回 false 以取消导航 + return false +}) +``` + +当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。 + +每个守卫方法接收两个参数: + +to: 即将要进入的目标 用一种标准化的方式 +from: 当前导航正要离开的路由 用一种标准化的方式 +可以返回的值如下: + +false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。 +一个路由地址: 通过一个路由地址跳转到一个不同的地址,就像你调用 `router.push()` 一样,你可以设置诸如 `replace: true` 或 `name: 'home'` 之类的配置。当前的导航被中断,然后进行一个新的导航,就和 from 一样。 +如果遇到了意料之外的情况,可能会抛出一个 Error。这会取消导航并且调用 router.onError() 注册过的回调。 + +如果什么都没有,undefined 或返回 true,则导航是有效的,并调用下一个导航守卫 + +以上所有都同 async 函数 和 Promise 工作方式一样: + +```javascript +router.beforeEach(async (to, from) => { + // canUserAccess() 返回 `true` 或 `false` + return await canUserAccess(to) +}) +``` + +**可选的第三个参数 next** +在之前的 Vue Router 版本中,也是可以使用 第三个参数 next 的。这是一个常见的错误来源,可以通过 RFC 来消除错误。然而,它仍然是被支持的,这意味着你可以向任何导航守卫传递第三个参数。在这种情况下,确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。这里有一个在用户未能验证身份时重定向到/login的错误用例: + +```javascript +// BAD +router.beforeEach((to, from, next) => { + if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) + // 如果用户未能验证身份,则 `next` 会被调用两次 + next() +}) +``` + +下面是正确的版本: + +```javascript +// GOOD +router.beforeEach((to, from, next) => { + if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) + else next() +}) +``` + +**全局解析守卫** +你可以用 `router.beforeResolve` 注册一个全局守卫。这和 `router.beforeEach` 类似,因为它在 每次导航时都会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。这里有一个例子,确保用户可以访问自定义 meta 属性 requiresCamera 的路由: + +```javascript +router.beforeResolve(async to => { + if (to.meta.requiresCamera) { + try { + await askForCameraPermission() + } catch (error) { + if (error instanceof NotAllowedError) { + // ... 处理错误,然后取消导航 + return false + } else { + // 意料之外的错误,取消导航并把错误传给全局处理器 + throw error + } + } + } +}) +``` + +`router.beforeResolve` 是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。 + +
+ +
小测试:
+ +根据上方小常识,以下关于前置路由守卫的说法不正确的是?

+ +## 答案 + +守卫是同步解析执行 + +## 选项 + +### A + +在路由配置中添加meta属性,属性为自定义,用于守卫判断 + +### B + +router.beforeEach 接收三个参数 + +### C + +当一个导航触发时,全局前置守卫按照创建顺序调用