vue-router 路由守卫

有一段时间没有写过 vue 的项目了，最近工作中需要自己搭建，所以简单分享一下vue-router路由守卫!

项目中很常见的一种场景，需求是，用户打开网址进入线上地址，首先是登录页面，用户需要账号密码验证码等手段通过验证和赋权，才可以进入到包括首页，各种管理等内容页面，未登录之前，通过修改路由来进行跳转，如果确实存在此路由，会跳转到登录页面进行登录，如果没有这个路由，会跳转到 404 页面。而成功完成登录后再进行路由地址修改则可以正常跳转！
这里就需要用到通配符匹配和 路由守卫等操作了

通配符 *

一般用于菜单路由匹配的最后面，为什么要放在最后面呢？因为放在前面会把写在它之后的路由菜单全部匹配进去，就相当于在小河的上游筑起水坝蓄水，那下游自然就没水了，所以通配符相当于确保没有漏网之鱼的作用，凡是没有被定义的路由，都会被它拦截，转而跳转到首页或者404等页面。

<!-- router 下的 index.js -->
export default new Router({
  routes: [
    {
      path:'/home',
      name:'home',
      component:home
    },
    //通配符的使用
    {
      path: '/detail-*',
      component:detail
    },
    {
      path: '/*',
      component:notFound
    }
  ]
})

beforeEach() 前置路由守卫

当你随意修改路由地址上的路由菜单进行跳转，比如在 '/login' 修改为 '/home'却可以正常跳转时，在尚未登录赋权的情况下就可以进入程序主页面，是一种很不安全的操作，就需要用到路由守卫了！全局前置路由守卫用于路由跳转之前执行，他有三个参数 'to' 参数，表示你当前正要跳转到哪里去，也就是目标页面路由， 'from'参数表示，从哪里来的，也就是当前页面， next() 方法，一定需要调用，继续往下执行的函数。

<!-- 在 roter 文件下的路由配置处， 将meta下的 requireAuth 设置为 true作为此菜单不可不登录直接跳转的标记 -->
{
    path: '/home',
    meta:{ requireAuth: true }
}

<!-- main.js -->
beforeEach((to, form, next) => {
    console.log(to)
    console.log(from)
    <!-- 如果要去的这个页面的路由配置中 meta.requireAuth 为 true的话 -->
    if(to.meta.requireAuth) {
        <!-- 判断本地存储是否有token令牌，如果有并且令牌合法，调用 next() 方法继续执行 -->
        if(localStorage.getItem('access_token')) {
            next();
        } else {
            <!-- 否则就直接调用next()方法跳转回登录页面重新登录 -->
            next({
                path: '/login'
            })
        }
    } else {
        next();
    }
})

设置完成之后保存并运行项目就会发现，在路径处修改路由不会直接跳转而是会自动拦截。