Как мне обновить путь в URL, чтобы удалить параметр? - PullRequest
Новая
       5

Как мне обновить путь в URL, чтобы удалить параметр?

0 голосов
/ 29 января 2019

Недавно я реализовал аутентификацию в своем приложении Vue.js с помощью Amazon AWS Cognito.У меня аутентификация работает правильно, но я хотел бы очистить URL, и я не смог выяснить, как.

Когда я аутентифицируюсь с Cognito, я получаю код, который используется для получения JSONВеб-токен.Это заставляет мой URL выглядеть так

http://localhost:8080/?code=7a1d074c-0d39-4da3-a291-b618b69019d4

Как только я получаю токен и декодирую его, я перенаправляю пользователя на домашнюю страницу моего приложения, используя следующий код с vue-router 

this.$router.push('home')

Это работает, но затем я получаю URL-адрес, который выглядит следующим образом

http://localhost:8080/?code=7a1d074c-0d39-4da3-a291-b618b69019d4#/home

Я хочу удалить часть кода?из URL и просто наберите

http://localhost:8080/#/home

Я пытался использовать this.$router.replace('home'), но это не помогло.

Есть ли способ сделать это с помощью vue-router?

Это полный раздел аутентификации моего кода 

mounted () {
  const qs = queryString.parse(window.location.search)
  this.code = (qs && qs.code)

  if (this.code) {
    this.GET_TOKEN(this.code)
      .then(() => {
        this.$router.push('home')
      })
  } else {
    this.LOG_IN()
  }
}

Ответы [ 3 ]

0 голосов
/ 30 января 2019

Я попробовал несколько вещей и нашел следующие работы.

Сначала я заменяю состояние, чтобы URL стал http://localhost:8080/#, делая это 

window.history.replaceState({}, document.title, window.location.origin + '/#')

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

this.$router.push({ path: 'home' })

Это дает мне http://localhost:8080/#/home, который правильно маршрутизирует, загружает мой домашний компонент, и, так как страница никогда не обновляется, у меня все еще остается нетронутым мое состояние Vuex.

Если я попытаюсь просто сделать следующее: 

window.history.replaceState({}, document.title, window.location.origin + '/#/home')

Это приведет к корректному обновлению URL до http://localhost:8080/#/home, но маршрут не сработает, поэтому мой компонент не будет подключен.

Похоже, это хакерский способ сделать это, что все еще заставляет меня поверить, что у меня что-то еще неправильно настроено или я делаю этот процесс неправильно, но пока это работает.

0 голосов
/ 31 января 2019

Я не уверен, что вы можете использовать его в вашем случае, но есть возможность использовать mode: 'history' в маршрутизаторе vue для включения режима истории HTML5 (https://router.vuejs.org/guide/essentials/history-mode.html), например. 

const router = new VueRouter({
  mode: 'history',
  ...
})

Это решит случай с # в вашем URL http://localhost:8080/?code=7a1d074c-0d39-4da3-a291-b618b69019d4#/home, поэтому использование режима истории должно определенно очистить параметры запроса:)

0 голосов
/ 30 января 2019

Попробуйте нажать object вместо literal (как описано в документации: https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)

Например: 

this.$router.push({ path: 'home' })

... или даже более рекомендуемым способомпередать имя маршрута вместо пути: 

this.$router.push({ name: <your-route-name> })

Это должно очистить параметры и запрос (? code) и получить то, что вы хотите:)

...