web-dev-qa-db-de.com

Nach dem Login mit dem vue-router auf die gewünschte Seite umleiten

In meiner Anwendung sind einige Routen nur für authentifizierte Benutzer zugänglich.
Wenn ein nicht authentifizierter Benutzer auf einen Link klickt, für den er angemeldet sein muss, wird er zur Anmeldekomponente umgeleitet.

Wenn sich der Benutzer erfolgreich anmeldet, möchte ich ihn an die angefragte URL umleiten, bevor er sich anmelden musste. Allerdings sollte auch eine Standardroute vorhanden sein, falls der Benutzer vor dem Anmelden keine andere URL angefordert hat.

Wie kann ich dies mit einem vue-router erreichen?

Mein Code ohne Weiterleitung nach dem Anmelden

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()
        }
    }        
)



Meine Login-Funktion in meiner Login-Komponente

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('/')
          })



Ich wäre sehr dankbar für jede Art von Hilfe!

redirectvue.jsvuejs2vue-router
15
Schwesi

Etwas anders kann dies durch Hinzufügen eines Abfrageparameters zu Ihrer Route erreicht werden, wenn Sie umleiten möchten, und dann bei der Anmeldung überprüft, ob der Parameter eingestellt ist. Wenn gesetzt, verwenden Sie es oder Sie fallen auf root zurück.

Im Code sollte so etwas aussehen:

Füge eine Aktion in deinen Link ein, zum Beispiel: 

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

Die Login-Anmeldungsaktion 

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

Ich hoffe es hilft.

16
V. Sambor

Ich weiß, das ist alt, aber es ist das erste Ergebnis in Google und für diejenigen von Ihnen, die möchten, dass es Ihnen gegeben wird, ist dies das, was Sie Ihren beiden Dateien hinzufügen. In meinem Fall verwende ich firebase für auth.

Router

Die Schlüsselzeile hier ist const loginpath = window.location.pathname;, wo ich den relativen Pfad ihres ersten Besuchs bekomme und dann die nächste Zeile next({ name: 'Login', query: { from: loginpath } });, die ich als Abfrage in der Weiterleitung übergebe.

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();
});

Loginseite

Keine Magie, Sie werden meine Aktion nur bemerken, wenn der Benutzer this.$router.replace(this.$route.query.from); authentifiziert wird, da er sie an die zuvor erstellte Abfrage-URL sendet.

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

Ich werde diese Logik detaillierter ausarbeiten, aber sie funktioniert so, wie sie ist. Ich hoffe, das hilft denen, die auf diese Seite stoßen.

6
Phillip

Dies wird Ihnen @Schwesi helfen.

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

Viel einfacher mit dieser Bibliothek Und Loginfunktion ist 

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