проблему с тем, что приложение после обновления страницы/перехода по ссылке не успело получить данные с backend о пользователе, а уже пускает его на страницу, куда якобы авторизованный пользователь не должен иметь доступ (/login).
Все примеры которые я посмотрел указывают на решение, которое вы вчера писали, но в нём не предполагается что нужно дождаться данных для того, чтобы в роутере они уже проверялись.
Подскажите пожалуйста, как это можно сделать правильно?
template App.vue
<template>
<div v-if="loaded">
<NavBar></NavBar>
<div class="app">
<router-view />
</div>
</div>
</template>
App.vue script
export default {
components: { NavBar },
data() {
return {
loaded: false,
};
},
mounted() {
console.log("mounted");
this.fetchUser().then(() => this.setLoaded());
},
methods: {
...mapActions({
fetchUser: "user/fetchUser",
}),
setLoaded() {
this.loaded = true;
},
},
};
store actions:
actions: {
async fetchUser({ commit }) {
const response = await profile();
if (response) commit("setUser", response);
},
},
user service
export const profile = async () => {
const response = await api
.get("api/user/profile")
.catch((e) => console.error(e));
return response.data || null;
};
index.js router:
router.beforeEach((to) => {
console.log("beforeEach", to.fullPath);
if (to.meta.disableIfAuthorized && store.getters["user/isAuthorized"]) {
console.log("disableIfAuthorized");
return {
path: "/",
};
}
if (to.meta.requiresAuth && !store.getters["user/isAuthorized"]) {
return {
path: "/login",
query: { redirect: to.fullPath },
};
}
});
В App.vue рисуй спиннер пока грузишь эти данные, а потом уже рисуй router-view и проблема решена.
Да я вот то же советовал, так и делает, но чет не получается говорит
Можешь банально сделать в main.js: await loadUser(); mountApp();
воу, я такого еще не видел, прикольно То есть в принципе нормально будет в main.js загрузить юзера, потом условно сетнуть в pinia его, и только потом замаунтить приложение? Или я может не так понял Но вроде в App.vue каком-то лучше это делать чтобы спинер показывать Но в принципе лоадер можно показывать и просто через index.html.. Снова несколько вариантов решения - какой из них лучше вообще?
Вот я тоже интересовался про vuex, допустим пользователь то загрузился до инициализации приложения, а как его потом в store засунуть
Да одинаково, если это спа. Чтобы лоадер красиво выглядел - надо будет специально его дольше показывать, чем идет запрос. Иначе будет моргание
Стор можно использовать без компонентов даже
Понял.. интересно, спасибо
Но как если он ещё не инициализирован?
А почему не инициализирован?
Если await loadUser(); createApp(App).use(store).use(router).mount("#app");
Этот вопрос повыше уже решили, но спасибо
Обсуждают сегодня