Блог

Итак, у меня есть эти файлы промежуточного программного обеспечения

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)
    }
  }
}