解决刷新页面，vuex数据丢失问题

vuex数据丢失了怎么办？？？？再次发送请求获取数据就好。

那么问题来了，难不成我多个组件使用同一个数据，我要在多个页面写请求吗？？？？不~

如果不是敏感数据，且数据不大的，我们可以存放在localstorage、sessionstorage、cookie。

但如果是一些敏感数据，例如用户信息这种的话，我们可以使用路由前置守卫router.beforeEach（(to,from,next)=>{}）

路由前置守卫router.beforeEach的回调有三个参数：to--到哪里去（路径）、from--从哪里来（路径）、next--它是一个方法，放行的意思

 

router.beforeEach((to, from, next) => {
  const token = Cookies.get("token");
  if (token && !目标数据为空) { //当有token且目标数据为空----也就是刷新后，vuex数据丢失的情况
    getAdminInfo().then((res) => { //重新发送请求
      if (res.code === 200) {
        store.commit("update", res.data);//调用vuex中mutation里面的方法，将数据重新存到vuex里面
        next(to);//存完之后，跳转到你想去的路由
      }
    });
  }else if (!token && from.path !== "/login") { //如果没有token且来的路由不是登录页（没登录）---让用户先登录（用户可能手动修改url进入其他路由）
    next("/login");
  } else if (token && to.path === "/login") { //如果有token（已登录）去的路由是登录页，跳转回来的地方（登录后要先退出才能去登录页）具体看需求
    next(from);
  } else { //以上情况皆不符合，直接放行
    next();
  }
});