vue路由守卫和vue持久化 ,localStorage和sessionStoragevue全局路由守卫，vue局部路由

vue的全局路由守卫

let whiteList = ["/home", "/", "about"];  //要守卫的路由

router.beforeEach((to, from, next) => {
  if (whiteList.includes(to.path)) {  //查找去往的路由有没有要守卫的路由
    if (localStorage.getItem("token")) {   //找到判断是否存token
      next();   //有token就去要去往的路由
    } else {   
      next({ path: "/login" });   //没有token 跳去登陆页  去登录
    }
  } else {      //没有找到要守卫的路由
    next();   //直接往下走
  }
});

vue局部守卫

 {
      path: '/my',
      name: 'my',
      component: () =>import ('../views/homepage/my.vue'),
      beforeEnter: (to, from, next) => {
             //console.log(to, from);
         if (sessionStorage.getItem("token")) {
               next()
         } else {
             next("login")
         }
       }
  }

全局守卫和局部守卫的区别

全局路由守卫：就是在整个网页中，只要发生了路由的变化，都会触发。全局导航守卫主要包括两个函数，分别为：beforeEach、afterEach

局部路由守卫：路由加载之前触发，更新路由之前触发，离开当前路由之前触发

安装vue持久化

npm install vuex-persistedstate --save

在store/index.js下面引入

import createPersistedState from 'vuex-persistedstate'

plugins: [createPersistedState({
    storage: window.sessionStorage  //localStorage
  })]
  //注意点:  window.sessionStorage 存的是sessionStorage里面
  // window.localStorage 存的是localStorage里面

localStorage和sessionStorage 的相同点

localStorage和sessionStorage都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象，所以要存储数组或对象必须使用JSON.stringify()加工。
不同浏览器无法共享localStorage或sessionStorage中的信息。

localStorage和sessionStorage 的区别

sessionStorage存储的值关闭浏览器后会自动清除；而localStorage存储的值不手动处理会一直存在，重启计算机也还在。
相同浏览器的不同页面的标签页间可以共享相同的localStorage，但是不同页面的标签页间无法共享sessionStorage的信息。
localStorage生命周期是永久，除非用户清除localStorage信息，否则这些信息将永远存在；sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过它存储的数据也就被清空了