使用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中的有名函数和无名函数
Oct 17 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 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列出MySQL中所有数据库的方法
2015/03/12 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
javascript 动态创建表格
2015/01/08 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
Vue程序调试的方法
2019/06/17 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python实现全角半角转换的方法
2014/08/18 Python
python中的全局变量用法分析
2015/06/09 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python制作词云的方法
2018/01/03 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python3实现表白神器
2019/04/09 Python
wxPython色环电阻计算器
2019/11/18 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
给护士表扬信
2014/01/19 职场文书
办公室文员工作职责
2014/01/31 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
大学生见习总结报告
2015/06/24 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
初中地理教学反思
2016/02/19 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL