Vue.js с VueRouter - как правильно маршрутизировать обновления пользователя - PullRequest
Новая
       36

Vue.js с VueRouter - как правильно маршрутизировать обновления пользователя

0 голосов
/ 24 августа 2018

Я использую Vue и VueRouter (а также Vuex, но это не так) в моем проекте. Представьте, что у меня есть 5 файлов:

  1. main.js - сохраняет все определения компонентов, импортирует их из внешние файлы и тд.
  2. App.vue - это основной компонент, который хранит все остальные
  3. rout.js - хранит все определения маршрутизации
  4. login.vue - хранит компонент входа (страница входа)
  5. content.vue - страница магазинов Компонент

(довольно упрощенная версия, но вы наверняка поняли).

Теперь, если я открою свой путь '/', он должен перенаправить меня на страницу '/ login', если я не вошел в систему, и на '/ content', когда я вошел в систему. Ничего особенного здесь нет. Теперь моя страница работает как задумано (почти). Если я вхожу в свой браузер '/ content', он пытается отобразить компонент '/ content' с данными по умолчанию (т. Е. UserId = -1), а затем сразу же перенаправляет меня на страницу '/ login'. «/ Контент» показывает только на секунду. И это моя проблема. Я хотел бы перенаправить на «/ login» без более раннего рендеринга «/ content» с данными по умолчанию.

Очевидно, что он пытается визуализировать '/ content' - может быть из кеша или чего-то еще, но так как перенаправление - это моя первая команда в create (), он не должен компонент mount / content в компоненте приложения, но /login.

Есть идеи, как это предотвратить? Я знаю, что я не прилагаю никакого кода, но я надеюсь, что вам не нужно будет понимать проблему и давать советы по любому решению, потому что это потребует сокращения и упрощения большого количества кода.

1 Ответ

0 голосов
/ 25 августа 2018

В вашем случае, я думаю, вы должны использовать Vue Router beforeEach.Вы можете использовать мета-поле в маршрутизаторе, чтобы указать, требуется ли для аутентификации путь, и выполнить обработку в функции beforeEach.

Я дам пример кода. 

import Router from 'vue-router';

const router = new Router({
  routes: [{
    path: '/content',
    meta: {
      auth: true,
    }
  }, {
    path: '/login',
  }]
});


router.beforeEach(async (to, from, next) => {
  if (to.matched.some(m => m.meta.auth)) {

    // user your authentication function
    const isAuth = await getAuthentication;

    if (!isAuth) {
      next('/login');
    }

    next();
  }
})

, если ваша функция аутентификации неасинхронная функция, вы должны удалить ключевые слова async / await

...