Nuxt.js가 RouteMiddleware에서 Vuex를 사용할 수 없음

Nuxt.js가 RouteMiddleware에서 Vuex를 사용할 수 없음

현재 Nuxt.js와 Firebase-admin을 사용하여 프로젝트를 만들고 있습니다.Route Middleware의 Vuex 사용자 정보를 참조하여 라우팅하고 싶은데 Route Middleware에서 Vuex에 액세스할 수 없습니다.

store/index.js코드는 다음과 같습니다.

export const state = () => ({
  user: {},
});

export const getters = {
  getUser: state => state.user,
};

export const mutations = {
  setUser(state, payload) {
    state.user = payload;
  },
};

export const actions = {
  nuxtServerInit({ commit, getters }, { req }) {
    if (process.server && process.static) return;
    if (!req.headers.cookie) return;

    if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie);

      const accessTokenCookie = parsed.access_token;
      if (!accessTokenCookie) return;

      admin.auth().verifyIdToken(accessTokenCookie)
      .then(decodedToken => {
        const userInfo = {
          email: decodedToken.email,
          uid: decodedToken.uid
        };
  
        commit("setUser", userInfo); 
　　　　console.log('uid in nuxtServerInit is ' + getters.getUser.uid)
      })
      .catch(e => {
        console.log(e)
      });  
    } else {
      return 
    }
  },
};

middleware/validateRoute.js코드는 다음과 같습니다.

export default function({ store, redirect, route }) {
  const currentPath = route.path;
　console.log("uid in middleware is " + store.getters.getUser.uid);

  if (
    !!store.getters.getUser.uid &&
    (currentPath === "/auth/signup" || currentPath === "/auth/login")
  ) {
    return redirect("/");
  }

  if (
    !store.getters.getUser.uid &&
    currentPath !== "/auth/signup" &&
    currentPath !== "/auth/login"
  ) {
    return redirect("/auth/login");
  }
};

콘솔을 보면store.getters.getUserVuex 사용자에게 값이 있는데도 정의되지 않았습니다.

console.log 이미지는 다음과 같습니다.

무슨 일이야?

언급URL : https://stackoverflow.com/questions/66272071/nuxt-js-cannot-use-vuex-in-routemiddleware