Vue-Router kullanarak giriş yaptıktan sonra istenen sayfaya yönlendirin

Question

Benim uygulamamda, bazı rotalar sadece kimliği doğrulanmış kullanıcılar için erişilebilir.
Kimliği doğrulanmamış bir kullanıcı, oturum açması gereken bir bağlantıyı tıkladığında, oturum açma bileşenine yönlendirilir.

Kullanıcı başarıyla oturum açtığında, oturumunu açmadan önce istediği URL'ye yönlendirmek istiyorum. Ancak, , kullanıcının giriş yapmadan önce başka bir URL istememesi durumunda da varsayılan rotası olmalıdır.

Bunu vue-router kullanarak nasıl yapabilirim?

---

giriş yaptıktan sonra yönlendirme olmadan Kodum

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

benim giriş bileşeninde My giriş fonksiyonu

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

Ben her türlü çok memnun olurum

yardım et!

Answer 1

Biraz farklı bir şekilde, bu, yönlendirmek istediğinizde rotanıza bir sorgu parametresi ekleyerek ve ardından param kümesi ayarlandığında giriş yaptığınızda kontrol ederek elde edilebilir; Eğer ayarlanmışsa, onu kullanırsınız ya da başka bir şekilde root üzerinde geri kalırsınız.

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

onu Umut

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

giriş göndermek eylem:

örnek için linke bir eylem koyun: kodunda

bu gibi görünmelidir yardım eder.