使用vue-router beforEach实现判断用户登录跳转路由筛选功能


Posted in Javascript onJune 25, 2018

在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求。

实现

本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一下就好,相关文章非常多,这里就不再赘述了。 话不多说,直接上代码。 为了方便日后代码的可维护性,我把相关方法写在了一个新建的filter.js文件里

使用vue-router beforEach实现判断用户登录跳转路由筛选功能 

接下来进入filter.js文件中,首先引入vue-router: import router from "./router"; 然后我们使用 router.beforEach 方法:

router.beforeEach((to, from, next) => {
  //根据字段判断是否路由过滤
  if (to.matched.some(record => record.meta.auth)) {
    if (getToken() !== null) {
      next()
    } else {
      //防止无限循环
      if (to.name === 'login') {
        next();
        return
      }
      next({
        path: '/login',
      });
    }
  } else {
    next()//若点击的是不需要验证的页面,则进行正常的路由跳转
  }
});

beforEach其实是vur-router的钩子函数,可以理解为每个router跳转之前都会调用的一个方法,既然有before同理当然也有afterEach,这个我们以后再讲。

首先来解释下beforEach的三个参数:

  • to:router即将进入的路由对象。
  • from:当前导航正要离开的路由。
  • next:一个function,一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next() : 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  • next(false) : 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。 你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项,注意,next可以通过query传递参数。
  • next(error) : (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

说明

好了,看到这里可能有些人还是没有理解,没关系,接下来我举个例子就可以明白了。

假设我们目前有三个路由: /home,/mine,/login

我们初始进入为 /home ,这时候点击跳转 /mine ,但是由于我们没有登录,所以会自动跳转到 /login
在以上这种情况下,

to:代表着路由 /mine ,我们要进入的路由。

from:代表着路由 /home ,我们将要离开的路由。

注意,使用beforEach最后必须要调用 next() ,否则会报错,如果不传参数,我们就会成功进入到 /mine ,如果我们传递参数,例如 next('/login') ,那么我们在点击任何路由都会跳转到 /login 界面。

但是我们的需求是只有点击需要进行登录验证的页面才进行拦截跳转,因此,我们需要加一些判断条件来进行路由的筛选。

if (to.matched.some(record => record.meta.auth)) {
    if (getToken() !== null) {
      next()
    }
  }

这里的to就是上面讲的参数to, to.matched 是一个对象数组,里面有to指向路由的相关信息,例如:path,name,meta等等。

我们用该数组调用some()方法根据返回值 true 或者 false 来进行判断,所以我们要在router.js路由配置文件中为我们需要验证登录判断跳转的路由添加一个字段来作为判断条件

{
   path: '/mine',
   name: 'mine',
   component: mine,
   meta:{auth:true} //我们自己添加的字段
  }

由于给路由添加了 meta:{auth:true} ,所以我们的 to.matched.some(record => record.meta.auth) 会返回 true ,这时我们就可以做登录判断了,我的项目是通过把token存入到 localstorage 来进行判断的, getToken()是我封装的一个获取 localstorage 方法。

if (getToken() !== null) {
      next()//若token不为null,则进行路由跳转
    }

如果没有token,我们下一步继续进行判断,也就是最终目的,进行路由拦截,跳转到登录页

else {
      next({
        path: '/login',
      });
    }

但是这时候我们会遇到新的问题,打开控制台会发现路由会无限的循环并最终崩溃,这是什么原因呢?仔细阅读上文红色加粗,我们可以理解为

next()
next({ path: '/login', });

也就是说beforeEach()必须调用next(),否则就会出现无限循环

next() 和 next('xxx') 是不一样的,区别就是前者不会再次调用router.beforeEach(),后者会。而由于我们没有token,所以在重新调用router.beforeEach()后,会再次进入到

else {
      next({
        path: '/login',
      });
    }

所以造成了无限循环,解决这个问题的方法也很简单,我们在 next({ path: '/login', }); 之前增加一个判断条件

if (to.name === 'login') {
        next();
        return
    }

如果我们to的定向路由 name == 'login' ,则执行 next(); 并return终止代码运行。

以上就是通过router.beforEach方法进行路由拦截了,我们不仅仅可以只做登录判断,通过这个方法可以实现很多需求,只要是有关路由跳转的都可以,在下只是抛砖引玉,如果有哪里不对的地方或者有更好的方法可以直接在评论告诉我,非常感谢。

总结

以上所述是小编给大家介绍的使用vue-router beforEach实现判断用户登录跳转路由筛选,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 #Javascript
JS实现仿微信支付弹窗功能
Jun 25 #Javascript
vue.js 实现输入框动态添加功能
Jun 25 #Javascript
vue-router重定向不刷新问题的解决
Jun 25 #Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 #Javascript
详解React之父子组件传递和其它一些要点
Jun 25 #Javascript
Vue EventBus自定义组件事件传递
Jun 25 #Javascript
You might like
php基础知识:类与对象(5) static
2006/12/13 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python Map 函数的使用
2020/08/28 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
公务员培训自我鉴定
2013/09/19 职场文书
项目合作意向书范本
2014/04/01 职场文书
项目负责人任命书
2014/06/04 职场文书
装修施工安全责任书
2014/07/24 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
感谢信的格式
2015/01/21 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
十七岁的单车观后感
2015/06/12 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书