Nuxt.js Cannot use Vuex in RouteMiddleware

Viewed 48

I'm currently creating a project using Nuxt.js and Firebase-admin. I want to route with reference to Vuex user information in Route Middleware, but I can't access Vuex in Route Middleware.

store/index.js code is below.

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 code is below.

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

When I look at the console, store.getters.getUser is undefined even though Vuex user has a value.

console.log image is here. enter image description here

What's going on?

0 Answers
Related