конфе мне подсказали, что при "первичной" загрузке страницы можно получить пользователя условно выполнив запрос на /api/user/profile в App.vue#mounted
import { mapActions } from "vuex";
export default {
components: { NavBar },
mounted() {
this.fetchUser();
},
methods: {
...mapActions({ fetchUser: "user/fetchUser" }),
},
};
Теперь у меня появилась мысля, что как-то не хорошо пускать пользователя на страницу логина, если он пытается на неё зайти авторизованным.
Поэтому я сделал вот так:
добавил новый meta параметр для страницы /login: disableIfAuthorized
но к моему сожалению оказалось, что если вручную, с полной перезагрузкой перейти на страницу /login, то запрос в mounted ещё не отработал и всё равно пускает даже если пользователь оказался авторизован.
Но стоит заметить, что если при уже загруженной страницы гулять по ссылкам через кнопочки то всё нормально, при попытке перехода на /login redirect на /
Может быть кто-то может подсказать что делать в подобной ситуации?
router.beforeEach((to) => {
if (to.meta.disableIfAuthorized && store.getters["user/isAuthorized"]) {
console.log("disableIfAuthorized");
return {
path: "/",
};
}
// instead of having to check every route record with
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth && !store.getters["user/isAuthorized"]) {
// this route requires auth, check if logged in
// if not, redirect to login page.
return {
path: "/login",
// save the location we were at to come back later
query: { redirect: to.fullPath },
};
}
});
actions: {
async fetchUser({ commit }) {
const response = await profile();
if (response.id) {
commit("setUser", response);
}
},
},
export const profile = async () => {
const response = await api
.get("api/user/profile")
.catch((e) => console.error(e));
return response.data || null;
};
Пока инфа о пользователе не получена - вообще не рисуйте ничего в принципе
Обсуждают сегодня