2017-08-24 31 views
6

का उपयोग करके लॉगिन के बाद अनुरोधित पृष्ठ पर रीडायरेक्ट करें मेरे एप्लिकेशन में कुछ मार्ग प्रमाणीकृत उपयोगकर्ताओं के लिए बस पहुंच योग्य हैं।
जब कोई अनधिकृत उपयोगकर्ता किसी लिंक पर क्लिक करता है, जिसके लिए उसे साइन इन होना होता है, तो उसे लॉगिन घटक पर रीडायरेक्ट कर दिया जाएगा।

यदि उपयोगकर्ता सफलतापूर्वक लॉग इन करता है, मैं उसे में लॉग इन करने से पहले अनुरोध किए गए यूआरएल पर रीडायरेक्ट करना चाहता हूं। हालांकि, वहाँ भी एक डिफ़ॉल्ट रूट, मामले में उपयोगकर्ता किसी अन्य URL का अनुरोध नहीं किया इससे पहले कि वह में लॉग इन होना चाहिए।

मैं इस का उपयोग कर Vue रूटर प्राप्त कर सकते हैं?
vue-router


प्रवेश के बाद पुन: निर्देशन के बिना मेरे कोड

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



अपना लॉगिन घटक में मेरा प्रवेश समारोह

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



मैं किसी भी प्रकार के बहुत आभारी होगा मदद!

+13

आप 'अगली ({पथ:'/लॉगिन? = '+ To.path} से कुछ ऐसा कर सकते हैं)' और फिर 'से' क्वेरी पैराम सेट होने पर रीडायरेक्ट करें और रीडायरेक्ट करें –

+0

@ FlorianHaider यह एक महान समाधान की तरह लगता है! मैं कैसे जांच सकता हूं कि क्वेरी लॉग इन से मेरे लॉगिन घटक से सेट किया गया है या नहीं? – Schwesi

+3

@Schwesi आपको 'this। $ Route.query.from' का उपयोग करके क्वेरी पैरामीटर मिलते हैं। यदि कोई प्रश्न मौजूद नहीं है तो आपको खाली वस्तु –

उत्तर

2

थोड़ा अलग तरीके से यह आपके मार्ग में एक क्वेरी पैराम जोड़कर हासिल किया जा सकता है जब आप रीडायरेक्ट करना चाहते हैं और फिर पैरामीटर सेट होने पर लॉगिन करते समय जांच कर सकते हैं; यदि सेट किया गया है तो आप इसका इस्तेमाल करते हैं या अन्यथा आप रूट पर फ़ॉलबैक करते हैं।

उदाहरण के लिए आपके लिंक की जाने वाली कार्रवाई रखो:

कोड में कुछ इस तरह देखना चाहिए

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

लॉगिन प्रस्तुत कार्रवाई

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

यह आशा है कि मदद करता है.