路由导航守卫中的全局前置守卫（Global Before Guards）是Vue Router中的一个重要概念。当路由即将改变（导航触发）时，这些守卫会按照创建顺序调用。它们允许你在路由跳转之前执行一些操作或判断，例如检查用户是否登录、是否拥有访问目标路由的权限等。
全局前置守卫的执行时机是在路由切换之前，因此它们可以用于在路由跳转之前进行拦截或处理一些逻辑。这些守卫是异步解析执行的，这意味着在所有的守卫都resolve之前，导航会一直处于等待状态。
使用全局前置守卫的方法是通过router.beforeEach函数来注册一个守卫。这个函数接收三个参数：to（即将要进入的目标路由）、from（当前导航正要离开的路由）以及next（一个必须调用的函数来resolve这个钩子）。
下面是一个简单的示例：
|---|--------------------------------------------|
| | const router = new VueRouter({ ... }) |
| | |
| | router.beforeEach((to, from, next) => { |
| | // 检查用户是否登录 |
| | if (!isLoggedIn()) { |
| | // 如果用户未登录，重定向到登录页面 |
| | next('/login') |
| | } else { |
| | // 如果用户已登录，检查是否拥有访问目标路由的权限 |
| | if (!hasPermission(to)) { |
| | // 如果用户没有权限，重定向到无权限页面 |
| | next('/no-permission') |
| | } else { |
| | // 如果用户有权限，继续导航 |
| | next() |
| | } |
| | } |
| | }) |
在上面的示例中，isLoggedIn和hasPermission是假设的函数，你需要根据实际的业务逻辑来实现它们。next函数用于决定下一步的操作：如果调用next()，则继续导航；如果调用next('/somePath')，则导航到特定的路由；如果调用next(false)，则取消导航。
要使用全局前置守卫，你需要首先确保你正在使用Vue Router，并且已经创建了一个router实例。然后，你可以通过调用router.beforeEach方法来注册一个全局前置守卫。
以下是如何使用全局前置守卫的基本步骤：
- 引入Vue Router：确保你已经在你的项目中引入了Vue Router，并且已经创建了一个router实例。
- 定义全局前置守卫 ：通过调用
router.beforeEach方法来定义一个全局前置守卫。这个方法接收一个回调函数作为参数，这个回调函数就是你的前置守卫逻辑。 - 编写守卫逻辑 ：在回调函数中，你可以编写你的前置守卫逻辑。这个函数接收三个参数：
to（即将要进入的目标路由对象）、from（当前导航正要离开的路由对象）和next（一个必须调用的函数来解析这个钩子）。 - 使用
next函数控制路由 ：在守卫逻辑中，你可以根据条件调用next函数来控制路由的跳转。例如，你可以根据用户的登录状态来决定是否允许跳转到目标路由。 - 结束守卫 ：确保在守卫逻辑的最后调用
next函数，否则路由将不会继续跳转。
以下是一个简单的示例：
|---|----------------------------------------------------------------|
| | import { createRouter, createWebHistory } from 'vue-router' |
| | |
| | // 定义路由 |
| | const routes = [ |
| | // ...你的路由定义 |
| | ] |
| | |
| | const router = createRouter({ |
| | history: createWebHistory(), |
| | routes, |
| | }) |
| | |
| | // 注册全局前置守卫 |
| | router.beforeEach((to, from, next) => { |
| | // 检查用户是否登录，这里只是一个示例，你需要根据你的实际情况来实现这个逻辑 |
| | if (!isUserLoggedIn()) { |
| | // 如果用户未登录，重定向到登录页面 |
| | next('/login') |
| | } else { |
| | // 如果用户已登录，继续导航到目标路由 |
| | next() |
| | } |
| | }) |
| | |
| | // 确保你的应用使用了这个router实例 |
| | // 例如，在Vue 3中，你可以在创建应用实例时传入router |
| | const app = createApp(App) |
| | app.use(router) |
| | app.mount('#app') |
在这个示例中，isUserLoggedIn是一个假设的函数，你需要根据你的实际情况来实现它。如果用户未登录，我们调用next('/login')来重定向到登录页面；否则，我们调用next()来继续导航到目标路由。