nuxt如何处理用户登录状态持久化：nuxtServerInit 页面渲染前的store处理

vue-cli项目中，我们可以用vuex-persistedstate，它可以使vuex的状态持久化，页面刷新都不会丢失，原理当然是localStorage啦！当然也可以使用vue-cookies进行保存token，问题来了，nuxt项目怎么保存登录状态呢？当然上面这两种方法我们都可以使用，但是有个问题，由于在created钩子中不存在window对象(获取cookie、localStorage都需要window对象)，当你需要判断是否存在token的时候，你必须要在mounted进行操作，这说明页面进来的一瞬间你无法得知是否已经登录了，这会导致显示用户名、组件显示于隐藏都慢半拍
　　nuxt非常友好，它提供了fetch钩子，还有nuxtServerInit，这两个钩子都运行在服务端并且我们能很快速地操作store

1、fetch的使用

如果页面组件设置了fetch方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前），此方法需要跟服务端的人员配合

2、nuxtServerInit

状态树文件中指定了nuxtServerInit方法，Nuxtjs调用它的时候会将页面的context上下文对象作为第2个参数传给它以供服务端调用，与fetch一样，不包括context.redirect和context.error方法，具体哪些参数可以查看官方文档。当我们想要将服务端的一些数据传到客户端，可以通过这个获取保存在状态中，客户端再从状态里取

nuxtServerInit：先把token存入cookie，这样每次请求都会自带cookie，那么利用nuxtServerInit里的参数 {req, res}，去获取到请求附带的cookie，然后解析出token，然后再存入vuex。

import Vuex from ‘vuex’

let store = () => new Vuex.Store({
state: {
token: ‘’
},
mutations: {
setToken (state, token) {
state.token = token
}
},
actions: {
nuxtServerInit({ commit }, { req }) {
let cookie = req.headers.cookie;

  // 将cookie转成json对象（自己实现该方法）
  let token = cookieparse(cookie).token;
  commit('setToken', token);
},

}
})

export default store