vue组件中的五种路由守卫案例演示！

当你在Vue应用中使用路由时，你可以通过路由守卫来控制页面的访问权限、处理登录状态检查以及在导航发生前后执行一些操作。Vue提供了三种类型的路由守卫：

1. 全局前置守卫：在路由切换开始之前调用。
2. 全局解析守卫：在路由被确认之前调用。
3. 全局后置守卫：在路由切换成功完成之后调用。
4.路由独享守卫：适用于单个路由，用于在进入/离开该路由前后执行特定逻辑。
5.组件内守卫：适用于单个组件，用于在组件内部的路由变化时执行特定逻辑。

全局前置守卫

下面，我将演示一个简单的Vue组件中的路由守卫案例。假设我们有两个页面：登录页和用户信息页。用户在未登录状态下不能访问用户信息页，只有登录后才能查看用户信息。

首先，确保你已经在Vue项目中安装了`vue-router`，如果没有，请先进行安装：

```bash
npm install vue-router
```

然后，我们来创建一个简单的Vue应用并添加路由守卫：

1. 创建一个Vue实例并设置路由：

```javascript
// main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
import UserInfo from './components/UserInfo.vue'

Vue.use(VueRouter);

const routes = [
  { path: '/login', component: Login },
  { path: '/user-info', component: UserInfo, meta: { requiresAuth: true } }
];

const router = new VueRouter({
  routes
});

new Vue({
  render: h => h(App),
  router
}).$mount('#app');
```

2. 创建两个简单的组件：Login.vue和UserInfo.vue。

```vue
<!-- Login.vue -->
<template>
  <div>
    <h1>Login Page</h1>
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      // 模拟登录成功后的操作
      this.$router.push('/user-info');
    }
  }
}
</script>
```

```vue
<!-- UserInfo.vue -->
<template>
  <div>
    <h1>User Information Page</h1>
    <p>Welcome to the user info page!</p>
  </div>
</template>
```

3. 现在，我们来添加路由守卫，确保只有在登录状态下才能访问用户信息页。

```javascript
// main.js

// ...（之前的代码）

router.beforeEach((to, from, next) => {
  const loggedIn = true; // 这里应该根据你的实际登录状态来获取

  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    // 如果需要登录但未登录，重定向到登录页
    next('/login');
  } else {
    // 否则，正常导航
    next();
  }
});

// ...（之后的代码）
```

在这个例子中，我简单地将`loggedIn`设置为`true`，你应该替换它为你的实际登录状态检查逻辑。当用户尝试访问`/user-info`路径时，路由守卫将会检查用户是否登录，如果未登录，则会重定向到登录页`/login`。一旦登录成功，用户可以访问`/user-info`。

to.matched.some(record => record.meta.requiresAuth) 目的是：

限制某些页面只能被授权用户如(vip)访问，而不是所有人。这时候就可以使用路由导航守卫来实现该功能。如果需要授权，我们可以根据用户是否登录或其他条件来决定是否放行进入页面。如果不需要授权，直接放行即可。

这只是一个简单的例子，实际项目中，你可能需要使用真实的登录验证和状态管理。路由守卫的功能在真实的Vue应用中非常有用，它可以帮助你处理权限控制和导航操作等场景。

全局解析守卫

对于全局解析守卫，它允许你在路由被确认之前执行一些异步操作或数据预取逻辑。它常用于在渲染组件之前获取数据，确保组件渲染所需的数据已经准备就绪。

在Vue中，你可以使用`beforeResolve`钩子来创建全局解析守卫。这个钩子会在路由被确认之前触发，且会等待所有异步操作完成。

下面是如何使用全局解析守卫的示例：

1. 假设我们有一个异步函数来模拟获取用户信息的操作。

```javascript
// utils.js
export function fetchUserInfo() {
  return new Promise((resolve) => {
    // 模拟异步请求
    setTimeout(() => {
      const userInfo = { id: 1, name: 'John Doe', email: '[email protected]' };
      resolve(userInfo);
    }, 1000);
  });
}
```

2. 在路由配置中，添加全局解析守卫。

```javascript
// main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import { fetchUserInfo } from './utils';

Vue.use(VueRouter);

const routes = [
  // ...（之前的路由配置）
];

const router = new VueRouter({
  routes,
});

router.beforeResolve(async (to, from, next) => {
  // 在进入路由之前，执行异步操作来获取数据
  if (to.matched.some(record => record.meta.requiresAuth)) {
    try {
      // 这里使用 fetchUserInfo 来模拟异步获取用户信息
      const userInfo = await fetchUserInfo();
      // 将用户信息添加到路由的元数据中，这样组件可以在组件内访问到这些数据
      to.meta.userInfo = userInfo;
      next();
    } catch (error) {
      // 异步操作出错，可以跳转到错误页面或其他处理
      console.error(error);
      next('/error');
    }
  } else {
    // 如果不需要登录验证，直接进入下一个钩子或导航
    next();
  }
});

new Vue({
  render: h => h(App),
  router,
}).$mount('#app');
```

3. 现在，在`UserInfo.vue`组件中，我们可以通过`this.$route.meta.userInfo`来访问在全局解析守卫中获取的用户信息。

```vue
<!-- UserInfo.vue -->
<template>
  <div>
    <h1>User Information Page</h1>
    <p>Welcome, { { userInfo.name }}!</p>
    <p>Email: { { userInfo.email }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userInfo() {
      return this.$route.meta.userInfo || {};
    }
  }
}
</script>
```

全局解析守卫允许我们在路由导航前获取异步数据，并将其添加到路由的元数据中，以便在组件中使用。这样，我们可以确保组件渲染之前所需的数据已经准备好。记得在实际项目中，使用真实的异步请求来获取数据，并处理可能的错误情况。

全局后置守卫

全局后置守卫允许你在路由切换完成后执行一些操作，无论是成功完成路由导航还是导航被中止或出现错误，都会触发全局后置守卫。

在Vue中，你可以使用`afterEach`钩子来创建全局后置守卫。这个钩子会在路由切换完成后被调用，无论是成功渲染组件还是导航被中止。

下面是如何使用全局后置守卫的示例：

1. 在`main.js`文件中添加全局后置守卫。

```javascript
// main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // ...（之前的路由配置）
];

const router = new VueRouter({
  routes,
});

router.afterEach((to, from) => {
  // 在路由切换完成后执行一些操作
  console.log(`Navigated from ${from.path} to ${to.path}`);
});

new Vue({
  render: h => h(App),
  router,
}).$mount('#app');
```

2. 现在，每当你在应用中进行路由切换时，无论是通过编程式导航（如`this.$router.push()`）还是通过点击链接，都会在控制台中打印出前后路由路径。

全局后置守卫通常用于执行一些日志记录、统计分析或与第三方服务的集成等操作。请注意，全局后置守卫并不能阻止导航过程，它只是在导航完成后执行额外的操作。

需要注意的是，在`afterEach`钩子中没有`next`函数，因为该钩子不会影响导航本身，而是作为一个"观察者"在导航完成后进行操作。

路由独享守卫

在路由配置中，你可以使用 beforeEnter 属性来定义路由独享守卫。这个守卫将仅应用于该特定路由，不影响其他路由。

const router = new VueRouter({
  routes: [
    {
      path: '/private',
      component: PrivateComponent,
      meta: { requiresAuth: true },
      beforeEnter: (to, from, next) => {
        // 在进入该路由之前执行的逻辑
        if (/* 检查用户是否登录或满足其他条件 */) {
          next(); // 放行，允许进入
        } else {
          next('/public'); // 重定向到公共页面或登录页面
        }
      }
    },
    // 其他路由配置...
  ]
});

 在上述示例中，beforeEnter 路由独享守卫被应用于 /private 路由。在进入该路由之前，会执行内部定义的逻辑，检查是否满足进入条件。

组件内守卫

组件内部守卫是指在组件内部通过 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 这三个守卫来执行特定的逻辑。这些守卫只能在路由组件中使用。

const PrivateComponent = {
  // 组件内部守卫
  beforeRouteEnter(to, from, next) {
    // 在进入该组件的路由前执行的逻辑
    if (/* 检查用户是否登录或满足其他条件 */) {
      next(); // 放行，允许进入组件
    } else {
      next('/public'); // 重定向到公共页面或登录页面
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 在组件内部路由更新时执行的逻辑
    // （例如，当从 /private/1 导航到 /private/2 时，组件会被复用，但是路由更新）
    // 在这里你可以根据需要执行适当的逻辑
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开该组件的路由前执行的逻辑
    // 例如，当从 /private/1 导航到其他路由时
    // 这里你可以询问用户是否要保存表单数据等
    next();
  },
  // 组件的其他配置...
};

 在上述示例中，我们定义了组件内的三个守卫：beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。这些守卫将在组件内部的路由变化时执行相应的逻辑。 beforeRouteEnter 守卫特别需要注意，因为它没有访问组件实例，所以不能直接访问组件的数据或方法，但你可以通过回调函数中的参数来访问 this 上下文。

综上所述，Vue提供了全局前置守卫、全局解析守卫和全局后置守卫,路由独享守卫,组件内守卫这五种路由守卫，使得你可以控制页面的访问权限，处理登录状态检查，以及在导航发生前后执行一些操作。根据不同的场景，你可以选择使用合适的守卫来满足你的需求。