web-dev-qa-db-fra.com

Redirection vers la page demandée après la connexion en utilisant vue-router

Dans mon application, certains itinéraires sont uniquement accessibles aux utilisateurs authentifiés.
Lorsqu'un utilisateur non authentifié clique sur un lien pour lequel il doit être connecté, il est redirigé vers le composant de connexion.

Si l'utilisateur se connecte avec succès, je voudrais le rediriger vers l'URL qu'il a demandé avant de se connecter . Cependant, il devrait également y avoir une route par défaut , au cas où l'utilisateur ne demanderait pas une autre URL avant de se connecter.

Comment puis-je atteindre cet objectif avec vue-router?

Mon code sans redirection après connexion 

router.beforeEach(
    (to, from, next) => {
        if(to.matched.some(record => record.meta.forVisitors)) {
            next()
        } else if(to.matched.some(record => record.meta.forAuth)) {
            if(!Vue.auth.isAuthenticated()) {
                next({
                    path: '/login'
                    // Redirect to original path if specified
                })
            } else {
                next()
            }
        } else {
            next()
        }
    }        
)



Ma fonction de connexion dans mon composant de connexion 

login() {
    var data = {
        client_id: 2,
        client_secret: '**************',
        grant_type: 'password',
        username: this.email,
        password: this.password
    }
    // send data
    this.$http.post('oauth/token', data)
         .then(response => {
             // authenticate the user
             this.$auth.setToken(response.body.access_token,
             response.body.expires_in + Date.now())
             // redirect to route after successful login
             this.$router.Push('/')
          })



Je serais très reconnaissant pour toute aide!

redirectvue.jsvuejs2vue-router
15
Schwesi

De manière légèrement différente, cela peut être obtenu en ajoutant un paramètre de requête dans votre itinéraire lorsque vous souhaitez rediriger, puis en vérifiant lors de la connexion si le paramètre est défini; Si est défini vous l'utilisez ou sinon vous vous repliez sur root.

Dans le code devrait ressembler à ceci:

Mettez une action sur votre lien par exemple: 

onLinkClicked() {
  if(!isAuthenticated) {
    // If not authenticated, add a path where to redirect after login.
    this.$router.Push({ name: 'login', query: { redirect: '/path' } });
  }
}

L'action de soumission de connexion 

submitForm() {
  AuthService.login(this.credentials)
    .then(() => this.$router.Push(this.$route.query.redirect || '/'))
    .catch(error => { /*handle errors*/ })
}

J'espère que ça aide.

16
V. Sambor

Je sais que c’est vieux, mais c’est le premier résultat dans google et pour ceux d’entre vous qui veulent le recevoir, voici ce que vous ajoutez à vos deux fichiers. Dans mon cas, j'utilise firebase pour l'authentification.

Routeur

La ligne de clé ici est const loginpath = window.location.pathname; où je reçois le chemin relatif de leur première visite, puis la ligne suivante next({ name: 'Login', query: { from: loginpath } }); que je passe en tant que requête dans la redirection.

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) {
    const loginpath = window.location.pathname;
    next({ name: 'Login', query: { from: loginpath } });
  } else if (!requiresAuth && currentUser) next('menu');
  else next();
});

Page de connexion

Pas de magie ici, vous remarquerez simplement mon action sur l'utilisateur authentifié this.$router.replace(this.$route.query.from);: il l'envoie à l'URL de requête que nous avons générée précédemment.

signIn() {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
        (user) => {
          this.$router.replace(this.$route.query.from);
        },
        (err) => {
          this.loginerr = err.message;
        },
      );
    },

Je vais préciser cette logique plus en détail, mais cela fonctionne tel quel. J'espère que cela aide ceux qui rencontrent cette page.

6
Phillip

Cela vous aidera @Schwesi.

Router.beforeEach(
    (to, from, next) => {
        if (to.matched.some(record => record.meta.forVisitors)) {
            if (Vue.auth.isAuthenticated()) {
                next({
                    path: '/feed'
                })
            } else
                next()
        }
        else if (to.matched.some(record => record.meta.forAuth)) {
            if (!Vue.auth.isAuthenticated()) {
                next({
                    path: '/login'
                })
            } else
                next()
        } else
            next()
    }
);
0
Mohammed Aktaa

Beaucoup plus facile avec cette bibliothèque Et la fonction de connexion est 

let redirect = this.$auth.redirect();
this.$auth
  .login({
    data: this.model,
    rememberMe: true,
    redirect: { name: redirect ? redirect.from.name : "homepage",  query: redirect.from.query },
    fetchUser: true
  })
0
Fatih TÜZEN