vue 路由守卫(导航守卫)及其具体使用


Posted in Javascript onFebruary 25, 2020

最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记

官方文档

导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,需要结合meta来实现

vue中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是router独享守卫

所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?总不能随便陌生人就给放进去?要到哪里去?然后保安再告诉你下一步该怎么做?如果你的确是这个房子主人允许进入的人,那就让你进入,否则就要打电话给房子主人,跟房主商量(登录注册),给你权限。

// 通过这个匹配判断是否有该权限或要求,这个一般作为页面权限设置,比如哪些页面需要登录才能进入,哪些不需要
to.matched.some(res => res.meta.requireAuth)

一、全局路由守卫

所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查
全局路由守卫有个两个:一个是全局前置守卫,一个是全局后置守卫

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去?
  console.log(from) => // 从哪个页面来?
  next() => // 一个回调函数
}
router.afterEach(to,from) = {}

next():回调函数参数配置

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项

二、组件路由守卫

// 跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
  // 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一页面,刷新不同数据时调用,
}
beforeRouteLeave (to, from, next) {
  // 离开当前路由页面时调用
}

三、路由独享守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach,他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数:

  1、to:即将要进入的目标路由对象;

  2、from:当前导航即将要离开的路由对象;

  3、next :调用该方法后,才能进入下一个钩子函数(afterEach)。

        next()//直接进to 所指路由
        next(false) //中断当前路由
        next('route') //跳转指定路由
        next('error') //跳转错误路由

beforeEach:

路由配置文件:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
   {
   path: '/home',
   name: 'home',
   component: HomePage
  },
   {
    path:'*',
    redirect:'/home'
   }
 ],
})
 router.beforeEach((to,from,next)=>{
  console.log(to);
  console.log(from);
  next();
 })
 export default router;

打印结果如下:

vue 路由守卫(导航守卫)及其具体使用

 实现用户验证的代码:

router.beforeEach((to, from, next) => {
  //我在这里模仿了一个获取用户信息的方法
 let isLogin = window.sessionStorage.getItem('userInfo');
  if (isLogin) {
    //如果用户信息存在则往下执行。
    next()
  } else {
    //如果用户token不存在则跳转到login页面
    if (to.path === '/login') {
      next()
    } else {
      next('/login')
    }
  } 
})

afterEach:

和beforeEach不同的是afterEach不接收第三个参数 next 函数,也不会改变导航本身,一般beforeEach用的最多,afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收next
  console.log(to);
  console.log(from);
})

到此这篇关于vue 路由守卫(导航守卫)及其具体使用的文章就介绍到这了,更多相关vue 路由守卫内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
Javascript地址引用代码实例解析
Feb 25 #Javascript
Javascript如何实现双指控制图片功能
Feb 25 #Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 #Javascript
通过js实现压缩图片上传功能
Feb 25 #Javascript
Vue实现简单计算器案例
Feb 25 #Javascript
使用Vue实现简单计算器
Feb 25 #Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 #Javascript
You might like
php Smarty 字符比较代码
2011/02/27 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
js对象基础实例分析
2015/01/13 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
JS面向对象编程详解
2016/03/06 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
python字符串,数值计算
2016/10/05 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
党课学习思想汇报
2014/01/02 职场文书
五一手机促销方案
2014/03/08 职场文书
企业领导对照检查材料
2014/08/20 职场文书
企业趣味活动方案
2014/08/21 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
社区母亲节活动总结
2015/02/10 职场文书
小学教师节活动总结
2015/03/20 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
行政复议答复书
2015/07/01 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
《藏戏》教学反思
2016/02/23 职场文书