路由守卫

路由守卫在开发者中的也是特别多的，主要是对路由进行权限控制，分为全局守卫、独享守卫、组件内守卫，下面一一根据案例说明

比如说有的路由不是随便看的，需要登录之后才可以看，比如说淘宝的个人中心，肯定是登录之后才能看的，下面进行简单演示

现在需要验证身份，这里我存在localstorage里面一个简单的数据作为验证凭证，如果name为zhangsan，才能查看news和message的路由信息，不然是查看不了的

当然也可以存在vuex中，或者是缓存，实际开发中有时候也会是用户的token

想要实现这种需求，最好的方式就是去router路由器中配置规则，这时候就不能直接暴露了，不然无法增加校验规则

全局守卫

它分为前置和后置两种守卫

前置路由守卫(beforeEach)

它是router中的一个方法，在初始化的时候和每次路由切换之前被调用

可以看到初始化和点击切换路由都会进行函数执行

但是没跳到路由对于的页面，这时候需要知道它的三个参数,分别是to,from,next

to(去哪)

from(从哪来)

next(放行)

如果需要放行，加上next()即可

这就是从哪来到哪去以及路由放行

动态放行

接下来就可以通过是否放行的标志进行动态放行了，一般从服务器获取，这里做演示写的比较简单从localStorage获取校验了

这里我故意让两个参数对不上不放行

这样怎么点路由也不会跳转了

但是这样太暴力了，我想要更精细的路由判断，那么可以这么做

精准校验路由

通过这种方式，可以放行一些路由和对指定路由进行控制，而不是全部路由

不想用路径当然可以用name去判断

// 全局前置路由守卫 在初始化的时候和每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
   if(to.path==='/home/news' || to.path==='/home/message'){
     // 如果从localStorage获取到的name为zhangsan就放行
     if(localStorage.getItem('name')==='zhangsan1'){
        next()
    }else{
        alert('参数校验失败，无权限查看')
    }
   }else{
     next()
   }
})