路由守卫是Vue Router提供的一种功能,用于在路由导航过程中拦截和处理路由跳转。通过路由守卫,开发者可以在用户进入某个路由之前、进入之后、或离开某个路由之前执行一些逻辑操作。若依使用路由守卫来实现权限验证、登录状态检查等功能。
路由守卫的类型
Vue Router 提供了三种类型的路由守卫:
- 全局守卫:在应用的每次导航时都会触发,可以用于全局的权限控制。
- 路由独享守卫:只在特定路由配置中定义,用于某个特定路由的导航控制。
- 组件内守卫:在单个组件内定义,用于控制该组件的生命周期内的导航。
全局守卫
1. 全局前置守卫
全局前置守卫在每次路由跳转之前执行。它通常用于检查用户是否已登录以及是否有权限访问目标路由。
import router from './router'
import store from './store'
router.beforeEach((to, from, next) => {
const token = store.state.token
if (token) {
if (to.path === '/login') {