全局路由守卫设置

VueRouter中的beforeEach钩子函数用于创建全局前置守卫,它在路由跳转前执行,常用于用户登录状态验证。当目标路径为登录页时不执行额外操作,否则检查存储的token进行登录验证,确保用户已登录才能访问特定路由。
摘要由CSDN通过智能技术生成

全局前置守卫可以在路由跳转前进行一些操作,如验证用户是否已登录。全局前置守卫的钩子函数名为beforeEach。

在Vue Router中,可以通过在router实例化时添加beforeEach守卫来实现全局前置守卫。以下是一个示例:

import Vue from 'vue'  
import Router from 'vue-router'  
  
Vue.use(Router)  
  
const router = new Router({  
  routes: [  
    // ...  
  ]  
})  
  
router.beforeEach((to, from, next) => {  
  // 在这里进行全局前置守卫的操作,如验证用户是否已登录  
  // to是即将要进入的目标路由对象  
  // from是当前导航正要离开的路由  
  // next是一个函数,一定要调用该方法来 resolve 这个钩子  
  if (to.path === '/login') {  
    // 如果目标路径是登录页面,则不进行任何操作  
    next()  
  }else if (getStorage()) {
    // 验证是否有token
    next()
    } else {  
    // 如果目标路径不是登录页面,则需要进行登录验证操作  
    // ...  
    next()  
  }  
})  
  
export default router

        在这个示例中,全局前置守卫的钩子函数为beforeEach,它接收三个参数:to、from和next。如果目标路径是登录页面,则直接调用next()方法进行路由跳转;如果目标路径不是登录页面,则需要进行登录验证等操作,并最终调用next()方法进行路由跳转。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值