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

　　vue-cli项目中，咱们能够用vuex-persistedstate，它可使vuex的状态持久化，页面刷新都不会丢失，原理固然是localStorage啦！固然也可使用vue-cookies进行保存token，问题来了，nuxt项目怎么保存登陆状态呢？固然上面这两种方法咱们均可以使用，可是有个问题，因为在created钩子中不存在window对象(获取cookie、localStorage都须要window对象)，当你须要判断是否存在token的时候，你必需要在mounted进行操做，这说明页面进来的一瞬间你没法得知是否已经登陆了，这会致使显示用户名、组件显示于隐藏都慢半拍

　　nuxt很是友好，它提供了fetch钩子，还有nuxtServerInit，这两个钩子都运行在服务端而且咱们能很快速地操做store

一、fetch的使用

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

<script> export default { async fetch ({ app, store, params }) { let { data } = app.$axios.get('/token'); store.commit('setToken', data.token); } } </script>

二、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