vue3 antd项目实战——vue-router路由守卫验证登录状态【后台管理系统 全局路由守卫】

需要的小伙伴可以收藏~

什么是路由守卫

路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数。

分类

路由守卫分为三种 ——分别是：全局路由守卫、组件路由守卫、独享路由守卫。

回调函数中的参数:

• to： 即将要进入的目标路由对象（到哪去）
• from： 即将要离开的路由对象（从哪离开）
• next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径

1.全局路由守卫

• beforeEach(to, from, next) 全局前置守卫，路由跳转前触发
• beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
• afterEach(to, from) 全局后置守卫，路由跳转完成后触发

2.路由独享守卫

• beforeEnter(to,from,next) 路由对象单个路由配置 ，单个路由进入前触发

3.组件路由守卫

• beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
• beforeRouteUpdadte(to,from,next) 当前路由改变时触发
• beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发

详解

1.路由前置守卫 beforeEach(to, from, next)

const router = new VueRouter({
    ... })

router.beforeEach((to, from, next) => {
   
  // ...
})

从名字全局前置守卫不难理解，它是全局的，即对整个单页应用中的所有路由都生效，所以当定义了全局的前置守卫，在进入每一个路由之前都会调用这个回调，那么如果你在回调中对路由的跳转条件判断出错，简单点就是死循环…因为你遗漏了某种路由跳转的情况，守卫会一直执行。
所以在使用全局前置守卫的时候一定要判断清楚可能会出现的路由跳转的情况。

在路由跳转前触发，在实际项目中应用最多，主要是登陆验证和跳转权限判断

2.全局解析守卫 beforeResolve(to, from, next)

router