vue中的路由守卫

vue中的路由守卫分为三种

1.全局前置守卫(beforeEach)

2.全局解析守卫(beforeResolve)

3.全局后置守卫(afterEach)

一、全局路由前置守卫(beforeEach) （经常使用）

会用在登录路由跳转之前做权限校验及身份验证（如果不配置用户可能会越级访问）

使用场景：登录注册页面

使用原理：在登陆之前判断token是否存在，如果存在就允许跳转，不存在就不允许跳转

// 前置路由写在main.js中
router.beforeEach((to, from, next) => {
	const token = localStorage.token;  // 获取token
	if(token) {     // 如果token不为null 就放行，如果为空 就不放行 
		next();
	} else {
	if(to.path === '/') {  // 在为空的情况下，我们路由跳转的是'/' 就放行。'/'代表我们登录页
			next()
		} else {           // 在为空的情况下，访问的不是'/'， 就直接跳转到'/'
			next({
				path: '/'
			})
		}
	}
})

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 在路由切换前执行的代码
  // 例如，检查用户是否登录，进行身份验证
  if (to.meta.requiresAuth && !userIsLoggedIn) {
    // 如果需要身份验证且用户未登录，可以重定向到登录页
    next('/login')
  } else {
    // 如果条件满足，继续路由导航
    next()
  }
})

export default router

参数：

1. to：即将要进入的目标路由的对象

2. from 当前路由正要离开的路由

3.next 确认放行

二、全局后置守卫

相比于前值守卫，后置守卫是在跳转之后触发的，通常用于记录路由导航信息或执行一些后续操作。（改变网页标题、记录跳转日志）

改变网页标题

// 前置路由写在main.js中
router.afterEach((to,from)=>{
	document.title = to.meta.title||'默认标题'
})

记录跳转日志

router.afterEach((to, from) => {
  // 在路由切换后执行的代码
  // 例如，记录路由导航信息
  console.log(`Navigated from ${from.path} to ${to.path}`)
})

三、全局解析守卫

这个守卫在导航被确认之前触发，它比beforeEach更早执行，但在路由组件渲染之前。它通常用于在路由渲染之前进行一些全局级别的处理。

router.beforeResolve((to, from, next) => {
  // 在导航被确认前执行的代码
  next(); // 继续路由导航
});

使用守卫的一些注意事项

全局前置守卫在每次路由切换前都会执行，而全局后置钩子只有在路由切换完成后才会执行。
全局前置守卫中，next（）函数必须调用，否则导航将无法继续。
如果在全局前置守卫中调用了next（）函数，则不会执行全局后置钩子。
如果在全局前置守卫中没有调用next（）函数，那么导航将会被中断，并抛出一个错误。