vue localstorage用法_VUE路由导航守卫

导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现

vue中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫。

所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来（from）？要到哪里去(to)？然后保安再告诉你下一步该怎么做(next())？如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。

// 通过这个匹配判断是否有该权限或要求，这个一般作为页面权限设置，
// 比如哪些页面需要登录才能进入，哪些不需要
to.matched.some(res => res.meta.requireAuth) 

一、全局路由守卫

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查。

全局路由守卫有个两个：一个是全局前置守卫(beforeEach)，一个是全局后置守卫(afterEach)

beforeEach有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，决定是否展示你要看到的路由页面。

next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由

router.beforeEach((to,from,next) => {
  const isLogin= localStorage.token ? true:false;

  if(to.path=="/login" || to.path=="/register"){
    next();
  }else{
    isLogin? next(): next("/login");
  }
})

和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身，一般beforeEach用的最多，afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收next
    console.log(to);
    console.log(from);
})

二、组件路由守卫

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
    next(vm => {})
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
}

beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
}

beforeRouteLeave (to, from, next) {
    // 离开当前路由页面时调用
}

三、路由独享守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

beforeEnter:(to,from,next)=>{}，

用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // ...
            }
        }
    ]
})