VueJS добавить внешний сайт в историю роутеров - PullRequest
0 голосов
/ 04 сентября 2018

Я создаю приложение с использованием Vue Router, которое использует «внешний» сайт для входа в систему. По сути это выглядит так:

Home.Vue

<template>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {

      }
    },
    created() {
      window.location = 'https://third_party_site.com?nextpage=http://my_site.com/#/entry'
    }
  }
</script>

<style scoped>

</style>

Этот third_party_site.com обрабатывает auth и отправляет JWT обратно в виде строки запроса в результирующий URL. Когда я пытаюсь использовать навигационную охрану (как показано ниже) для получения строки запроса, маршрутизатор Vue просматривает только историю маршрутизатора.

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Entry from '@/components/Entry'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/entry',
      name: 'Entry',
      component: Entry,
      beforeEnter: (to, from, next) => {
        console.log('to',to)
        console.log('from',from)
        console.log('next',next)
        next()
      },
      meta: {
        title: 'Entry'
      }
    },
  ]
})

Консоль печатает ожидаемое местоположение «до», но местоположение «от» является базовым путем, «/», и параметры запроса отсутствуют. Как мне получить «внешний» маршрут, чтобы я мог получить доступ к параметрам запроса? Полученный файл console.log «from» находится ниже.

from 
  {name: null, meta: {…}, path: "/", hash: "", query: {…}, …}
    fullPath: "/"
    hash: ""
    matched: []
    meta: {}
    name: null
    params: {}
    path: "/"
    query: {}
    __proto__: Object

Прежде чем спрашивать, приложение в его текущем состоянии должно быть построено таким образом, и у меня нет доступа к внешнему сайту.

1 Ответ

0 голосов
/ 04 сентября 2018

Дикий выстрел здесь, в темноте, но # в вашем параметре запроса nextpage, вероятно, мешает удаленному сайту.

То, что он увидит, это

QUERY    => nextpage=http://my_site.com/
FRAGMENT => #/entry

, поэтому он будет перенаправлен обратно на http://my_site.com/, потому что, вероятно, игнорирует любой фрагмент.

Вы должны правильно кодировать значение, например,

window.location = 'https://third_party_site.com/?nextpage=' + 
    encodeURIComponent('http://my_site.com/#/entry')

, который будет производить nextpage=http%3A%2F%2Fmy_site.com%2F%23%2Fentry

...