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

Question

所以我有这个中间件文件

中间件/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 中访问时我的状态始终为空，如果呼叫来自客户端，我可以访问商店？

Answer 1

您期望的是服务器上的响应。但是这项工作是在客户端完成的。你的问题nuxtServerInit就是答案。由于 SSR 在服务器端触发。因此，当您获取 api 时，您需要通过nuxtServerInit如下调用来填充商店。

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