1
votes

Comment mettre à jour le chemin dans l'URL pour supprimer un paramètre?

J'ai récemment implémenté l'authentification dans mon application Vue.js à l'aide d'Amazon AWS Cognito. L'authentification fonctionne correctement, mais j'aimerais nettoyer l'URL et je n'ai pas été en mesure de comprendre comment.

Lorsque je m'authentifie avec Cognito, je reçois un code qui est utilisé pour obtenir un jeton Web JSON. Cela donne à mon url l'aspect suivant

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

Une fois que j'obtiens le jeton et le décode, je redirige l'utilisateur vers la page d'accueil de mon application en utilisant le code suivant avec 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()
  }
}

Cela fonctionne, mais je me retrouve alors avec une URL qui ressemble à ceci

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

Je voudrais supprimer la partie? code de l'URL et simplement

http: // localhost: 8080 / # / home

J'ai essayé d'utiliser this. $ router.replace ('home ') mais cela ne résout pas le problème.

Y a-t-il un moyen de faire cela en utilisant vue-router?

Ceci est la section d'authentification complète de mon code

this.$router.push('home')

p >

vue.js vue-router

2 commentaires

que se passe-t-il si vous utilisez plutôt this. $ router.go ('home') ?

Lorsque j'utilise this. $ Router.go ('home') , cela actualise simplement la page et ne redirige pas vers l'itinéraire home . J'ai parcouru une documentation et il semble que dans la vue 2.0 et supérieure, vous utilisez $ router.push au lieu de $ router.go .

3 Réponses :

0
votes

Essayez de pousser avec object au lieu de literal (comme décrit dans la documentation: https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort a>)

Par exemple:

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

... ou une méthode encore plus recommandée pour passer le nom de la route au lieu du chemin:

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

1 commentaires

Merci pour la suggestion. J'ai donné une chance à ces deux exemples et je me retrouve toujours avec le même problème. C'est peut-être quelque chose dans la façon dont mes itinéraires sont configurés. Je vais essayer quelques choses (les gardes de navigation en font partie), et si je peux trouver une solution, je publierai le résultat. Merci encore.

0
votes

J'ai essayé quelques trucs et j'ai trouvé les travaux suivants.

Je remplace d'abord l'état pour que l'URL devienne http: // localhost: 8080 / # en faisant ça

XXX

Ensuite, je pousse la route de départ dessus en utilisant la méthode préférée référencée ci-dessus

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

Cela me donne http: // localhost : 8080 / # / home qui achemine correctement, charge mon composant Home, et comme la page n'a jamais été actualisée, mon état Vuex est toujours intact.

Si j'essaye de faire ce qui suit:

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

Cela mettra correctement à jour l'URL vers http: // localhost: 8080 / # / home , mais la route ne se déclenchera pas, donc mon composant ne monte pas.

Cela semble être une manière piratée d'accomplir cela, ce qui me porte toujours à croire que j'ai quelque chose d'autre configuré de manière incorrecte ou que je fais ce processus de manière incorrecte, mais pour le moment, ceci fonctionne.

0 commentaires

2
votes

Je ne suis pas sûr que vous puissiez l'utiliser dans votre cas, mais il existe une option pour utiliser mode: 'history' en vue du routeur pour activer le mode d'historique HTML5 ( https://router.vuejs.org/guide/essentials/history-mode.html a >), par exemple

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

Cela résoudra le cas avec # dans votre URL http: // localhost: 8080 /? code = 7a1d074c-0d39 -4da3-a291-b618b69019d4 # / home , donc l'utilisation du mode historique devrait effacer définitivement les paramètres de requête :)

1 commentaires

Génial, cela a résolu mon problème. J'ai pu me débarrasser du hack que j'ai mis en place pour contourner le problème. Merci beaucoup pour l'aide.