169 похожих чатов

@Djaler @vklimv Товарищи, у меня всё ещё не получается решить мою

проблему с тем, что приложение после обновления страницы/перехода по ссылке не успело получить данные с 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 },
};
}
});

13 ответов

100 просмотров

В App.vue рисуй спиннер пока грузишь эти данные, а потом уже рисуй router-view и проблема решена.

Stanislav Lashmanov
В App.vue рисуй спиннер пока грузишь эти данные, а...

Да я вот то же советовал, так и делает, но чет не получается говорит

Можешь банально сделать в main.js: await loadUser(); mountApp();

воу, я такого еще не видел, прикольно То есть в принципе нормально будет в main.js загрузить юзера, потом условно сетнуть в pinia его, и только потом замаунтить приложение? Или я может не так понял Но вроде в App.vue каком-то лучше это делать чтобы спинер показывать Но в принципе лоадер можно показывать и просто через index.html.. Снова несколько вариантов решения - какой из них лучше вообще?

Prototype- Автор вопроса
¿Сергей?
воу, я такого еще не видел, прикольно То есть в п...

Вот я тоже интересовался про vuex, допустим пользователь то загрузился до инициализации приложения, а как его потом в store засунуть

¿Сергей?
воу, я такого еще не видел, прикольно То есть в п...

Да одинаково, если это спа. Чтобы лоадер красиво выглядел - надо будет специально его дольше показывать, чем идет запрос. Иначе будет моргание

Prototype
Вот я тоже интересовался про vuex, допустим пользо...

Стор можно использовать без компонентов даже

Prototype- Автор вопроса
Volodymyr Klimov
Стор можно использовать без компонентов даже

Но как если он ещё не инициализирован?

Prototype- Автор вопроса
Volodymyr Klimov
А почему не инициализирован?

Если await loadUser(); createApp(App).use(store).use(router).mount("#app");

Если правильно вопрос понял, beforeEach же может быть асинхронным, а в нем можно чет типа такого наговнячить. Соответственно внутри можно подождать загрузки юзера и перекинуть на нужный роут.

Prototype- Автор вопроса
R.T
screenshot Если правильно вопрос понял, beforeEach же может б...

Этот вопрос повыше уже решили, но спасибо

Похожие вопросы

Обсуждают сегодня

30500 за редактор? )
Владимир
47
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
вы делали что-то подобное и как? может есть либы готовые? увидел картинку нокода, где всё линиями соединено и стало интересно попробовать то же в ddl на lua сделать. решил с ч...
Victor
8
Подскажите пожалуйста, как в CustomDrawCell(Sender: TcxCustomGridTableView; ACanvas: TcxCanvas; AViewInfo: TcxGridTableDataCellViewInfo; var ADone: Boolean); получить наз...
A Z
7
Ребят в СИ можно реализовать ООП?
Николай
33
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Как передать управляющий символ в открытую через CreateProcess консоль? Собсна, есть процедура: procedure TRedirectThread.WriteData(Data: OEMString); var Written: Cardinal;...
Serjone
1
Он в одиночку это дело запилил или была какая-то команда?
Aquinary
12
~ 2m21s  nix shell github:nixos/nixpkgs#stack ~  stack ghc -- --version error: … while calling the 'derivationStrict' builtin at /builtin/derivation.nix:...
Rebuild your mind.
6
Всем привет, нужна как никогда, нужна помощь с IO в загрузчике. Пишу в code16 после установки сегментных регистров, пишу вывод символа. Пробовал 2 варианта: # 1 mov $0x0E, %a...
Shadow Akira
14
Карта сайта