使用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 相关文章推荐
javascript string字符串优化问题
Jul 31 Javascript
javascript闭包入门示例
Apr 30 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
npm qs模块使用详解
Feb 07 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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 代码优化之经典示例
2011/03/24 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP 实现链式操作
2021/03/09 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python学生管理系统开发
2019/01/30 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
python time.strptime格式化实例详解
2021/02/03 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
Android面试题及答案
2015/09/04 面试题
python基于opencv批量生成验证码的示例
2021/04/28 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python