Vue: запретить просмотр, если реквизиты не установлены

Question

Я разрабатываю игру в Vue, которая имеет 2 вида: «установка» и «игра». Параметры, которые вы установили в первом, передаются как реквизиты во втором, и игра начинается с этих параметров.

Но ничто не мешает пользователю получить прямой доступ к .../#/play, тем самым пропуская настройку необходимые реквизиты. Я могу обойти это, установив разумные значения по умолчанию ...

props: {
  prop: { default: 'sensible default' },
  // ...
},

... но мне интересно, как полностью ограничить доступ к этому представлению, если пользователь не достиг его через .../#/setup. Я знаю о required: true и навигационных охранниках, но не знаю, как go об использовании одного или обоих в этом случае, или если они даже лучший вариант.

Есть ли простой способ перенаправить, если к .../#/play обращаются напрямую?

Answer 1

Вы можете использовать beforeEnter навигационная охрана :

routes: [
  {
    path: '/setup',
    name: 'setup',
    component: Setup
  },
  {
    path: '/play',
    name: 'play',
    component: Play,
    props: true, // <-- converting params to props
    beforeEnter: (to, from, next) => {
      if (to.params.myprop) {
        next(); // <-- everything good, proceed
      } else {
        next({ name: 'setup' }); // <-- redirect to setup
      }
    }
  }
]

Это проверяет, что существует определенный параметр, прежде чем разрешить навигацию по маршруту play, в противном случае он перенаправляет обратно до setup.