Блог

/api/user/ Запрос на предоставление $auth.loggedIn доступа происходит после того, как клиент уже загрузился / начал загрузку. Это приводит к тому, что некоторые из моих модулей отображаются, а затем исчезают после $auth.loggedIn того, как стало true / false, из-за чего все выглядит беспорядочно при загрузке страницы.

Было бы идеально, если бы вызов /api/user/ выполнялся так же, как работает запрос asyncData, чтобы $auth.loggedIn он был доступен до того, как что-либо отобразится. Есть ли какие-либо настройки / конфигурации, которые делают это возможным? Я использую универсальный режим.

Вы можете использовать промежуточное программное обеспечение, определенное в Nuxt здесь, В вашем случае вы могли бы выполнить свой запрос /api/user раньше, например, в промежуточном программном обеспечении, вызываемом userLoggedIn например.

 export default function (context) {
    // Here we return a Promise in the middleware to make it asynchronous
    // Cf doc https://nuxtjs.org/guide/routing#middleware
    // So we return a promise that can only be resolved when the function resolve is called
    return new Promise(resolve => this.$axios.$get('/api/user'/).then((user) => {
        if (!user) {
            console.log('NOT LOGGED');
            // Do something if not logged, like redirect to /login
            return context.redirect('/login');
        }
        resolve(user);
    }));
}
 

Я сделал предложение с помощью $ axios, но, конечно, вы можете его изменить. Вам просто нужно сохранить промежуточное программное обеспечение и обещание иметь асинхронное промежуточное программное обеспечение.

Затем на вашей странице, ожидающей запроса, вы можете добавить:

 export default {
    middleware: [
        'userLogged',
    ],
    data() {...}
};