vue-router组件状态刷新消失的问题

场景：vue-router实现的单页应用，登陆页调用登陆接口后，服务器返回用户信息，而后经过router.push({name: 'index', params: res.data})跳转到主页，并在主页显示数据。可是当刷新页面时，因为并非经过登陆接口进入主页，router中没有‘params: res.data’信息，主页没法获取到登陆信息。

解决方案：

一、session&服务器渲染

传统的方案是，登陆页和主页是单独的两个页面，登陆成功后服务器生成用户信息对应的session，而后渲染主页数据，并经过响应头将sessionid传给浏览器并生成相应的cookie文件。这样下次请求页面时，浏览器会在http header带上相应的cookie，而后服务器根据cookie中的sessionid判断用户是否登陆，再显示用户数据。

若是项目采用先后端分离思想，服务器只提供接口，不进行服务器渲染，那么这种办法是行不通了。

二、$route.query

咱们能够在路由跳转的时候带上登陆请求的参数：

router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
  url: 'xxx',
  method: 'post',
  data: {
    username: this.$route.query.username,
    password: this.$route.query.password
  }
})

这样登陆参数会被保存在url中，像这样：“http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx”，而后在created钩子中调用登陆接口来返回数据。

即便密码进行了加密，将用户名密码这类敏感信息放在url中确定也是不合理。

三、cookie

另外一个办法是把登陆参数存入cookie，而后在created钩子中获取cookie中存的信息，再调用登陆接口。将用户名密码存入cookie中一样不合理，改进版是登陆成功后服务器返回一个token，在有效期内经过token获取用户数据。

cookie存取数据比较麻烦，由于cookie是一个字符串，保存的键值对以 "=" 连接，须要额外写操做cookie的方法。

function setCookie (name, value, exdays) {
  let date = new Date()
  date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000))
  let expires = 'expires=' + date.toGMTString()
  document.cookie = name + '=' + value + '; ' + expires
}
function getCookie (name) {
  name = name + '='
  let cookieArr = document.cookie.split(';')
  for (let i = 0; i < cookieArr.length; i++) {
    let cookie = cookieArr[i].trim()
    if (cookie.indexOf(name) === 0) {
      return cookie.slice(name.length)
    }
  }
  return ''
}

四、HTML5 Web存储

提到Web存储，潜意识确定以为不少浏览器都不支持，其实IE8及以上都支持localStorage和sessionStorage了。Vue项目最低支持IE9，因此能够放心的使用Web存储。

localStorage存储数据没有时间限制，不主动删除就不会失效。而sessionStorage是在页面或者浏览器关闭时就会失效，适合本场景应用。

咱们能够把token信息存在sessionStorage中，而后每次刷新页面经过token请求数据；可是既然可以把token存储到本地，为何不直接把经常使用的数据直接保存到本地呢？利用本地数据，能够减小客户端网络请求，还能够下降服务器负担。

因为sessionStorage中保存的值是字符串，直接赋值非字符串类型会先调用其toString()方法。例如执行sessionStorage.user = user，保存的值倒是[object Object]。咱们能够经过JSON.stringify()将须要保存的对象转为JSON字符串再保存到sessionStorage，而后在须要使用时经过JSON.parse()将字符串转回对象。

let user = {
  name: 'admin',
  address: 'xxx',
  email: 'xx@xx.xx'
}
// sessionStorage.user = user // [object Object]
sessionStorage.user = JSON.stringify(user)

...

let data = JSON.parse(sessionStorage.user)