vue-router beforEach实现判断用户登录跳转路由筛选功能
- 更新时间:2020-06-19 09:35:35
- 编辑:戌冰巧
参考资料
正文内容
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求。
实现
本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一下就好,相关文章非常多,这里就不再赘述了。 话不多说,直接上代码。 为了方便日后代码的可维护性,我把相关方法写在了一个新建的filter.js文件里
接下来进入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实现判断用户登录跳转路由筛选,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
相关教程
-
vue-router中hash模式和history模式详解
这篇文章主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
发布时间:2020-03-24
-
解决Vue Router的懒加载路径的方案
这篇文章主要介绍了Vue Router的懒加载路径的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
发布时间:2019-12-19
-
vue+vue-router转场动画效果的代码实例
今天小编就为大家分享一篇vue+vue-router转场动画的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
发布时间:2020-02-16
-
移动端滑动切换组件封装 vue-swiper-router
这篇文章主要介绍了移动端滑动切换组件封装 vue-swiper-router实例详解,需要的朋友可以参考下
发布时间:2020-03-17
-
Vue.js项目API、Router配置拆分实践
这篇文章主要介绍了详解Vue.js项目API、Router配置拆分实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2019-12-07
-
vue传参方式及router用法技巧
这篇文章主要介绍了vue的传参方式和router使用技巧,本文给大家列举了好几种传参方式,需要的朋友可以参考下
发布时间:2020-01-03
-
实例讲解vue-router传参的两种方式
Vue Router 是 Vue.js 官方的路由管理器。这篇文章主要介绍了详解vue-router传参的两种方式,需要的朋友可以参考下
发布时间:2020-02-12
-
Vue.js项目实战
Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英
大小:141 MBVue
-
Vue.js前端开发:快速入门与专业应用
本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的
大小:3.6KB MB前端开发电子书
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。
大小:186.6 MBWeb前端电子书
-
前端工程师必备技能:Vue移动开发实战技巧
Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201
大小:122 MBVue实战电子书
-
Node.js实战:使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用
大小:227 MBNode.js电子书
-
Vue.js v2.x 官方教程
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 易用 会HTML、CSS、JavaScript就可以构建应用。 灵活 可以在一个库和一套完整框架之间自如伸缩。 高效 20kB运行大小,超快虚拟 DOM,最省心的优化 目录 基础 深入了
大小:5.11 MBVue手册
-
Vue企业开发实战
本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。
大小:109.6 MBVue.js实战电子书