Nuxt.js中nuxtServerInit的使用

Nuxt.js中，vuex已经默认内核实现，可以使用普通模式和传统模式两种形式使用。

详见：https://www.nuxtjs.cn/guide/vuex-store/

在开发登录过程中遇到问题，vuex中存储的内容，在F5或者开新标签之后，数据就会消失。例如token之类的需要在客户端一直存在的数据，则需要重新加载到vuex中。

在路由中间件中无法获得window对象，因为Nuxt.js在ssr模式下，路由中间件是在服务器中进行工作的。所以我们尝试在每次服务启动时，使用cookie中保存的token值进行同步。

由于在Nuxt.js 3中，传统模式将要删除，在使用时也会进行提示，所以我们只是用普通模式进行开发。

在/store下创建文件token.js用来在vuex中存储token。

/store/token.js

export const state = () => ({
  data: null
})

export const mutations = {
  setToken (state, data) {
    state.data = data
  }
}

在login.vue中添加方法获取token并保存。

/pages/login.vue

import axios from 'axios';
const Cookie = process.client ? require('js-cookie') : undefined

export default {
    layout: 'login',
    data() {
        return {
            user: {
                userName: '',
                password: ''
            }
        };
    },
    methods: {
        login: async function() {
            
            let { data } = await axios.post(`http://127.0.0.1:3000/api/admin/login`, {
                'user': this.user
            })
            if( data.err ){
                alert(data.err)
            } else {
                this.$store.commit('token/setToken', data.token)
                Cookie.set('token', data.token)
                this.$router.push('/')
            }
        }
    }
}

此时，遇到一个问题，就是 nuxtServerInit 要如何使用。

根据官方文档介绍，写法如下：

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}

但这明显是一种传统形式的写法，这种写法在后续Nuxt.js版本中将会淘汰。

最终尝试发现，需要创建/store/index.js，在其中添加方法：

const cookieparser = process.server ? require('cookieparser') : undefined

export const actions = {
  nuxtServerInit ({ commit }, { req }) {
    let token = null
    if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie)
      try {
        token = parsed.token
      } catch (err) {
        // 找不到有效的Cookie
      }
    }
    commit('token/setToken', token)
  }
}

才可以实现。