मदद चाहिए क्योंकि मुझे कुछ समझ नहीं आ रहा है...

मेरे पास है:

// AuthService.js
login(user) {
    return Api.post('/login', user);
},


// store/user.js
async login(context, user) {
    try {
        let response = await AuthService.login(user);
        context.commit('SET_TOKEN', response.data.api_token);

        response = await AuthService.me();
        context.commit('SET_USER', response.data.user)
    }catch (e) {
        console.log(e);
    }
},

// Login.vue
async onSubmit() {
    await this.$store.dispatch('user/login', this.user);
    this.$router.push({name: 'Home'});
}

मुझे पता है कि axios ने एक वादा वापस कर दिया है ताकि मैं स्टोर/उपयोगकर्ता में प्रतिक्रिया के लिए async/प्रतीक्षा कर सकूं। लेकिन मैं वास्तव में राउटर.पुश और रीडायरेक्ट को रोकने के लिए लॉगिन घटक में त्रुटि भेजने की कोशिश कर रहा हूं।

समाधान:

// AuthService.js
login(user) {
    return Api.post('/login', user);
},


// store/user.js
async login(context, user) {
    let response = await AuthService.login(user);
    context.commit('SET_TOKEN', response.data.api_token);

    response = await AuthService.me();
    context.commit('SET_USER', response.data.user)
},

// Login.vue
async onSubmit() {
    try {
        await this.$store.dispatch('user/login', this.user);
        this.$router.push({name: 'Home'});
    } catch (e) {
        console.log(e);
    }
}
0
kazulu 2 मई 2020, 18:14
try catch को store/user.js में डालने के लिए, आपको शायद इसे Login.vue में रखना चाहिए
 – 
A. Lau
2 मई 2020, 18:20
यह इतना आसान था, धन्यवाद।
 – 
kazulu
2 मई 2020, 18:23
सामान्य तौर पर, आपको try catch का उपयोग नहीं करना चाहिए जब तक कि आप वास्तव में स्वयं त्रुटि को संभालना नहीं चाहते। console.log(e) लगाना व्यर्थ है और इससे आपके द्वारा अनुभव की जा रही समस्याएँ उत्पन्न होंगी।
 – 
A. Lau
2 मई 2020, 18:25
हाँ, कंसोल.लॉग (ई) यह सिर्फ पोस्ट के लिए है। मेरी परियोजना में मैं दिखाने के लिए एक अधिसूचना घटक को त्रुटि भेजता हूं।
 – 
kazulu
2 मई 2020, 18:27

2 जवाब

आदर्श रूप से, आपको यह जांचना चाहिए कि पुनर्निर्देशन से पहले टोकन सफलतापूर्वक सेट किया गया है या नहीं। नीचे मैं टोकन को null के रूप में सेट कर रहा हूं यदि आपकी AuthService कॉल के साथ लॉगिन विफल हो जाता है। और आपके सबमिट ईवेंट में, मैं जांचता हूं कि सही पथ पर रीडायरेक्ट करने से पहले स्टोर में टोकन मान है या नहीं

async login(context, user) {
  try {
    let response = await AuthService.login(user);
    context.commit('SET_TOKEN', response.data.api_token);

    response = await AuthService.me();
    context.commit('SET_USER', response.data.user)
  }catch (e) {
    console.log(e);
    // --> set the token as null, since it failed the login
    context.commit('SET_TOKEN', null);

  }
},

// Login.vue
async onSubmit() {
  await this.$store.dispatch('user/login', this.user);
  // --> Here check if the SET_TOKEN is present before redirecting to home
  if(this.$store.state.token == null) {
    this.$router.push({name: 'Login'});

  } else {
    this.$router.push({name: 'Home'});
  }
}
0
kiddorails 2 मई 2020, 18:22

लॉगिन करने के बाद भी आपका प्रोग्राम जारी रहेगा या तो आपको कोई त्रुटि मिली या नहीं। आपको इसे रोकना चाहिए और त्रुटियों को संभालना चाहिए।

इस स्थिति के कारण, यह त्रुटि UI पर निर्भर करती है, इसलिए आपको उस त्रुटि को संभालने के लिए अपने घटक पर इस AJAX अनुरोध को संभालना होगा।

मुझे लगता है कि समस्या को ठीक करने के लिए आपको अपने कोड आर्किटेक्चर को थोड़ा सा बदलने की जरूरत है (आपको लॉगिन क्रिया को ट्रिगर करने की आवश्यकता नहीं है):

// Login.vue
async onSubmit() {
    try {
        let response = await AuthService.login(user);
        context.commit('SET_TOKEN', response.data.api_token);

        response = await AuthService.me();
        context.commit('SET_USER', response.data.user);
        
        this.$router.push({name: 'Home'});
    } catch (e) {
        // handle what happens when you got errors
        // or throw e;
    }
}
0
Mehdi KhoshNevisZ 2 मई 2020, 20:15