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.
What's going on?
