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 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
React服务端渲染(总结)
Jul 01 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
javascript实现弹幕墙效果
Nov 28 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&mysql(六)
2006/10/09 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
教你如何使用php session
2013/10/28 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
Django的models中on_delete参数详解
2019/07/16 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
海飞丝广告词
2014/03/20 职场文书
体育课课后反思
2014/04/24 职场文书
5s推行计划书
2014/05/06 职场文书
放飞理想演讲稿
2014/09/09 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书