Как запретить посетителю видеть приложение перед перенаправлением? - PullRequest
Новая
       37

Как запретить посетителю видеть приложение перед перенаправлением?

0 голосов
/ 27 июня 2019

Я создаю SPA с использованием Vue-CLI с клиентской библиотекой JavaScript OAuth 2.0 под названием JSO . Он использует HTML 5.0 localStorage для кэширования токенов доступа.

В моем полном приложении все работает нормально, за исключением следующего вопроса:

Когда пользователь впервые попадает в мое приложение, он быстро замечает приложение, а затем автоматически перенаправляется на сторонний экран авторизации. Я не хочу, чтобы "быстрый взгляд" происходил - мне нужно, чтобы пользователь немедленно перенаправлялся на стороннюю страницу входа в систему, ДО того, как он увидит какую-либо часть моего приложения.

Итак, я решил настроить Global Before Guards , используя Vue-Router, вот так:

От: Main.js 

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      requiresAuth: true
    }
  },

    ...more routes...and they all require auth...
]

router.beforeEach((to, from, next) => {
  const token = window.localStorage.getItem('my-token-example')
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    if (token == null) {
      client.getToken()
      next(false)
    }
  } else {
    next()
  }
})

new Vue({
  created: function() {
    //check for response parameters if user has an auth token (uses JSO plugin)
    //if token received, then it is stashed into localStorage
    client.callback()
  },
  render: h => h(App),
  router: router
}).$mount('#app')

Пример App.vue: 

<template>
    <div id="app">
     <Header />
    <routerView />
   </div>
</template>

Информация о client.callback():

Я ловлю ответ заголовков, когда пользователь возвращается в приложение

Информация о client.getToken():

Я получаю полезную нагрузку токена

Примечания. Документация для проверки подлинности JSO: «Вы также можете убедиться, что токен доступен на ранних этапах вашего приложения, чтобы все взаимодействие с пользователем и перенаправление происходили до полной загрузки приложения. Для этого выполните вызов getToken и дождитесь обратного вызова, прежде чем продолжить.

ПОМНИТЕ ВСЕГДА вызывать функцию callback () для обработки ответа от сервера OAuth, прежде чем использовать getToken (), в противном случае вы окажетесь в redirect_loop "

Есть ли у кого-нибудь предложения о том, как я могу запретить пользователю видеть мое приложение, пока он не будет перенаправлен на сайт авторизации? Обновление: я думаю, что вижу проблему ... глобальные охранники влияют только на раздел приложения в компоненте <RouterView />? Следовательно, мы видим заголовок и баннер моего приложения перед перенаправлением?

1 Ответ

0 голосов
/ 28 июня 2019

Я решил это.Мне пришлось просто сделать v-if для моего app.vue файла, например: <div v-if="token !== null>

, который скрывает шаблон приложения до получения токена.

...