Nuxt / Vue - почему страница загружается до выполнения beforeRouteEnter?
Я новичок в Nuxt и работаю над приложением SSR, которое использует Django на бэкэнде.
Я пытаюсь создать страницу входа в систему, и перед ее рендерингом я хотел бы проверить, вошел ли уже пользователь в систему и перенаправляет ли он пользователя на другую страницу.
По разным причинам я не могу сделать это из промежуточного программного обеспечения Nuxt, так как мне нужно, чтобы этот код выполнялся на стороне клиента, а не на стороне сервера, поэтому я решил использовать beforeRouteEnter. Кажется, мой код работает, но проблема в том, что он загружает страницу, а затем, примерно через 1-2 секунды, перенаправляет на другую страницу. Это немного некрасиво, так как я не хочу, чтобы пользователь видел страницу входа в систему перед перенаправлением.
Я пробовал то же самое с beforeCreate, но результат был таким же
Почему так случилось? Это потому, что страница кешируется? Могу я это исправить?
Вот код:
export default {
name: 'LoginPage',
props: {
},
data(){
return {
}
},
beforeRouteEnter (to, from, next) {
return axios({
method: 'post',
url: 'http://127.0.0.1:8000/checkAuth',
data: {
},
withCredentials: true,
headers: {}
}).then(function (response) {
if (response['data']['state'] == 'True'){
//user is logged in, redirect
next('/')
} else {
//user is not logged in, don't redirect
next()
}
}).catch(function (error) {
next()
});
}
...
}
Ответы 1
Попробуйте написать это в этой форме
beforeRouteEnter(to, from, next) {
next(async (vm) => {
await axios...
if (...) {
next()
} else {
next(false) // in case the navigation needs to be blocked
}
})
}
Таким образом, он должен дождаться результата, прежде чем разрешить навигацию.
Если вам нужна эта проверка только на pages, вы также можете использовать asyncData для получения данных даже до перехода на следующую страницу (она будет заблокирована до тех пор, пока не будет разрешена). Остерегайтесь, потому что F5 на целевой странице не вызовет этот хук.
Если вы async/await вызовите свой axios, он подождет, прежде чем разрешить навигацию. Вы можете поместить setTimeout на 4 секунды в ловушку asyncData, чтобы быть уверенным, что он ожидает вызова API (просто чтобы убедиться, что вы правильно его подключили!). Если он не ждет setTimeout, где-то есть проблема.
Я имею в виду, что что бы я ни попробовал, перед перенаправлением я увижу страницу входа на 1 секунду. Я имею в виду, что HTML на моей странице отображается, а затем выполняется код Nuxt. Это происходит со всем, что я пробовал, включая asyncData и другие методы.
Является ли ваша страница начальной или той, на которую вы переходите (переходя со страницы до этой, через vue-router)?
Позвольте мне попытаться объяснить. Вот что происходит в моем браузере (Chrome): я обновляю страницу входа -> сразу же увижу html-страницу на странице -> примерно через одну секунду происходит перенаправление, хотя на консоли Nuxt я вижу, что код выполняется немедленно
Это происходит, когда я перехожу прямо из ввода URL, а не из навигации
Если ваш проект создан как универсальное приложение, это правда, что вы увидите статическую страницу входа до того, как начнется гидратация. Нет никакого способа обойти это, кроме как иметь статический загрузчик или что-то подобное, которое вы удалите, если он проверит Логика JS. Если вам не нужны преимущества SSR, вы также можете сделать свое приложение только SPA, что устранит эту головную боль. В противном случае рекомендуется начать разработку страницы-заполнителя до тех пор, пока не начнется гидратация. ^^
Спасибо, ну я начинаю думать, что мне нужен режим SPA, а не универсальный в данном случае
Еще одна интересная вещь - это то, что вы можете указать Nuxt исключить создание определенных страниц, вы можете записать на нее свою страницу login, и она будет единственной, которая будет отображаться на стороне клиента. Остальная часть вашего приложения останется универсальной. nuxtjs.org/docs/2.x/configuration-glossary/…
Спасибо. Да, действительно странно, что я пробовал это с ssr: false, но у меня все еще была эта проблема. Может мне нужно что-то еще сделать, чтобы сделать это в режиме SPA
Затем вам понадобится yarn build (target должен быть server, если я правильно помню) для производственной сборки, и он должен отлично работать с базовым yarn dev. Попробуйте отключить JS на стороне клиента, чтобы дважды проверить, действительно ли это только SPA или нет. Может пригодится: stackoverflow.com/a/63638062/8816585
Большое тебе спасибо! Я пробовал это, но результат тот же. То же самое происходит с asyncData. В основном HTML-код страницы загружается, и через секунду запускается все содержимое Nuxt.