NuxtJS-为什么在使用SSR服务器端渲染访问时，中间件中我的vuex存储状态始终为空

问题描述

所以我有这个中间件文件

middleware / authenticated.js

export default function (context) {
    //console.log('context.store.state :>> ',context.store.state);

    if(process.server === true) { //Server Side

        //why is my store state here is always empty when access in SSR
        console.log(context.store.state.authen.UserToken);

    } else { //Client Side

        if(!context.store.state.authen.UserToken) {
            context.redirect('/error');
        } else {
            //Refresh Token
            context.$axios.get("authen/refresh")
                .then((res) => {
                    const payload = {
                        UserToken: res.data.DataReturn.Token,UserId: res.data.DataReturn.UserId,UserEmail: res.data.DataReturn.UserEmail,UserFullname: res.data.DataReturn.UserFullname
                    };
                    context.store.dispatch("authen/SetLogin",payload);
                })
                .catch(function (error) {
                    context.redirect('/error');
                });
        }

    }
}

为什么在SSR中访问时我的状态始终为空，如果调用来自客户端，我可以访问商店吗？

解决方法

您期望的是服务器上的响应。但是这项工作是在客户端完成的。 回答nuxtServerInit就是答案。随着SSR在服务器端触发。因此，在获取api时，您需要像下面这样调用nuxtServerInit来填充商店。

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