vue中对访问权限的登陆拦截和跳转

在vue中我们进行路由跳转的时候，会存在一个路由记录存储在 $route 对象当中，路由所匹配到的所有路由记录都会暴露为 $route 对象 (还有在导航守卫中的路由对象) ，而这些记录我们可以通过 $route.matched 来获取，返回的结果为一个数组对象，里面有to指向路由的相关信息，例如：path，name，meta等等。

在此同时，每个router跳转之前都会调用的一个方法即vur-router的钩子函数beforEach 。

首先要了解beforEach的三个参数：

1. to：router即将进入的路由对象。
2. from：当前导航正要离开的路由。
3. next：一个function，一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

• next() : 进行管道中的下一个钩子。
• 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() 注册过的回调。

   接下来我们就可以通过 $route.matched 获取到的数组并调用数组的some()方法来根据其返回值 true 或者 false 来进行路由跳转的管理。

路由的相关配置：

{
      path: '/mine',
      name: 'mine',
      component:resolve => require(['@/components/settings/WorkflowSettings'],resolve),
      meta:{
        title:"工作流设置",
        auth:true//我们自己添加的字段
       }  
 }

接下来在钩子函数中进行相关的条件判断：

router.beforeEach((to, from, next) => {
    //根据字段判断是否进行路由过滤（即是否需要登录才能访问）
    if (to.matched.some(record=> record.meta.auth)) {
        if (window.sessionStorage.token !== null) {
            next()
        } else {
            //防止无限循环
            if (to.name === 'login') {
                next();
                return
            }
            next({
                path: '/login',
            });
        }
    } else {
        next()//若点击的是不需要验证的页面,则进行正常的路由跳转
    }
});

小知识点：

定义和用法：
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。
语法：

var arr = [23,44,3]
if (arr.some(val => val < 10)) {
console.log('true')
}

some 英语翻译为一些,every翻译为每个，所以some方法 只要其中一个为true 就会返回true的，相反，every（）方法必须所有都返回true才会返回true，哪怕有一个false，就会返回false；every（）和 some（）目的：确定数组的所有成员是否满足指定的测试

every:一假即假:

some:一真即真