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