使用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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
JS实现图片切换特效
Dec 23 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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
Vue中props的使用详解
2018/06/15 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
中班中秋节活动反思
2014/02/18 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
活动总结范文
2014/08/30 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript