在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求。
本篇文章默认您已经会使用webpack或者vue-cli来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一下就好,相关文章非常多,这里就不再赘述了。话不多说,直接上代码。为了方便日后代码的可维护性,我把相关方法写在了一个新建的filter.js文件里
路由器。beforeEach(下),从=比;{//根据字段判断是否路由过滤
如果(to.matched。一些(记录=比;record.meta.auth)) {
如果(getToken () !==null) {
next ()
其他}{//防止无限循环
如果(to.name==='登录'){
next ();
返回
}
下一个({
路径:/登录,
});
}
其他}{
next()//若点击的是不需要验证的页面,则进行正常的路由跳转
}
});
beforEach其实是vur-router的钩子函数,可以理解为每个路由器跳转之前都会调用的一个方法,既然之前有同理当然也有afterEach,这个我们以后再讲。
首先来解释下beforEach的三个参数:
-
<李>:路由器即将进入的路由对象。
<李>:当前导航正要离开的路由。
<李>:一个函数,一定要调用该方法来解决这个钩子。执行效果依赖一方法的调用参数。
<李> next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是证实(确认的)。
<李>下(错误):中断当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器后退按钮),那么URL地址会重置到从路由对应的地址。
<李> next(“/?或者下({路径:'/'}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向下传递任意位置对象,且允许设置诸如替换:真的,名字:“回家”之类的选项以及任何用在router-link的支持或路由器。推动中的选项,注意,可以通过查询传递参数。
<李> next(错误):(测试盒框+)如果传下的入参数是一个错误实例,则导航会被终止且该错误会被传递给router.onError()注册过的回调。
<李>
好了,看的到这里可能有些人还是没有理解,没关系,接下来我举个例子就可以明白了。
假设我们目前有三个路由:/home/我/登录
我们初始进入为/home,这时候点击跳转/我的,但是由于我们没有登录,所以会自动跳转到/登录
在以上这种情况下,
:代表着路由/我的,我们要进入的路由。
:代表着路由/家庭,我们将要离开的路由。
注意,使用beforEach最后必须要调下(),用否则会报的错,如果不传参数,我们就会成功进入到/我的,如果我们传递参数,例如下(“/登录”),那么我们在点击任何路由都会跳转到/登录界面。
但是我们的需求是只有点击需要进行登录验证的页面才进行拦截跳转,因此,我们需要加一些判断条件来进行路由的筛选。
这里的,就是上面讲的参数,。匹配是一个对象数组,里面有,指向路由的相关信息,例如:路径、名称、元等等。
我们用该数组调用一些()方法根据返回值真实或虚假者来进行判断,所以我们要在router.js路由配置文件中为我们需要验证登录判断跳转的路由添加一个字段来作为判断条件
由于给路由添加了元:{身份验证:真},所以我们的to.matched。一些(记录=比;record.meta.auth)会返回真,这时我们就可以做登录判断了,我的项目是通过把令牌存入到localstorage来进行判断的,getToken()是我封装的一个获取localstorage方法。
