Vue前端页面如何存储并刷新浏览数据

本文已参与「新人创作礼」活动，一起开启掘金创作之路

一个场景 我需要在网页浏览的时候获取到用户的名称 然后通过这一个名称去获取到用户的数据 但是每进一个新的页面 用户的信息就会清除掉 而我们就需要重新获取信息了 但是如果获取不到信息我们应该跳转到登陆界面让用户重新登陆 而这我们应该怎么办呢 怎么处理这种现象呢

首先我查阅了资料 查到了使用vue的全局前置守卫router.beforeEach方法可以实现获取不到用户信息可以跳转到想要的界面 和用sessionStorage 去进行针对一个 用户数据的session 的存储（关闭窗口，存储的数据清空）

首先我们先获取到用户session的数据 并通过 window.sessionStorage.setItem('userInfo', response.data.username)去把用户名字存储起来 当然在存储之前 我们先清掉之前的用户信息再获取一次 否则一直存在就没必要再获取用户信息了

created() {
  const _this = this
  window.sessionStorage.clear()

  window.sessionStorage.removeItem('userInfo')
  _this.$axios.get('http://localhost:8568/user/info').then(function (response) {
    window.sessionStorage.setItem('userInfo', response.data.username)

  })
}

如果获取得到用户的信息是可以正常显示 如果获取不到的话 我们再点击刷新该如何让它跳转到登陆界面呢 这时候的router.beforeEach方法就有用了

我们先找到vue项目的router的index.js文件 然后在最下面添加router.beforeEach方法 这个方法是啥意思呢 首先我们先定义一个变量去获取我们存储在sessionStorage里的用户名称 如果获取不到我们跳回到登陆界面并提醒登陆已过期

router.beforeEach((to, from, next) => {
  //我在这里模仿了一个获取用户信息的方法
  let isLogin = window.sessionStorage.getItem('userInfo');

  if (isLogin!="undefined") {
    //如果用户信息存在则往下执行。
    next()
  } else {
    //如果用户token不存在则跳转到login页面
    if (to.path === '/login') {
      next()
    } else {
      alert("登录已过期，请重新登录")
      next('/login')
    }
  }
})