NuxtJS

Question

所以我有这个中间件文件

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访问时state一直是空的，如果是客户端调用就可以访问store了？

Answer 1

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

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

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

NuxtJS - Why is my vuex store state is always empty in middleware when access using SSR (Server side rendering)

javascript

store

vue.js

vuex