Asked Oct 18th, 2019 7:40 AM 112 0 3
  • 112 0 3
+1

Vấn đề về nuxt auth và middleware vue

Share
  • 112 0 3

Mình đang gặp vấn đề về nuxt chức năng login của mình sử dung popup khi check middleware nếu chưa login sẽ show popup login lên nhưng khi load lại trang thì nó chạy middleware trước khi nuxt/auth chạy xong dẫn đến mỗi lần load lại trang thì nó cứ show popup lên 1 tí rồi mới tắt mình k biết cách giải quyết vấn đề này Mọi người giúp mình với

3 ANSWERS


Answered Oct 18th, 2019 7:45 AM
Accepted
+2

Ý bạn là bạn kiểm tra login bằng API, mỗi lần API gọi thì phải đợi 1 khoảng thời gian dữ liệu mới trả về thì lúc đó popup mới tắt đi. Nếu vấn đề của bạn là như thế thì bạn hãy dùng async / await để chờ server trả dữ liệu về rồi mới xử lý đến popup nhé. Ví dụ thế này:

async checkLogin() {
      const response = await apiCheckUserLogin();
      if (!response.data.isLogin) {
             showPopup = true;
     }
}
Share
Oct 18th, 2019 8:22 AM

mình sử dụng middleware check

 export default {
        middleware({store, redirect, route}) {
            if (!store.getters['auth/authenticated']) {
                store.dispatch('auth/setShowLoginPopup', true);
            }
        },
}

auth thì mình lưu dưới dạng state, nên khi f5 state load chưa xong nên bị vấn đề này

export const getters = {
    authenticated(state){
        return state.loggedIn;
    },
0
| Reply
Share
Hải Hà @HaiHaChan
Oct 18th, 2019 8:45 AM

@xuannam79 Mình đoán vấn đề bạn đang gặp phải là chưa lưu auth vào store trước khi check middleware. Bạn lưu state.loggedIn như thế nào vậy?

0
| Reply
Share
Oct 18th, 2019 9:04 AM

@xuannam79 thế bạn đã lưu trạng thái đăng nhập vào store chưa? cho mình xem code phần action và mutation được không

0
| Reply
Share
Answered Oct 18th, 2019 8:41 AM
+4

Bạn thử dùng hàm nuxtServerInit trong vuex để get thông tin của server như authenticate. sau đó lưu vào state. còn middleware chỉ việc check state từ trong store mà không cần call api.mình nghĩ sẽ giải quyết được vấn đề này.

Share
Answered Oct 31st, 2019 8:27 AM
0

Trong middleware e return về cái promise nếu có gọi API hoặc chạy các hàm bất đồng bộ là được. Nó sẽ đảm bảo middleware được resolve rồi mới chạy tiếp.

Share