Yêu cầu thg 10 18, 2019 7:40 SA 479 0 3
  • 479 0 3
+1

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

Chia sẻ
  • 479 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 CÂU TRẢ LỜI


Đã trả lời thg 10 18, 2019 7:45 SA
Đã được chấp nhận
+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;
     }
}
Chia sẻ
thg 10 18, 2019 8:22 SA

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;
    },
Avatar Hải Hà @HaiHaChan
thg 10 18, 2019 8:45 SA

@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?

thg 10 18, 2019 9:04 SA

@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

Đã trả lời thg 10 18, 2019 8:41 SA
+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.

Chia sẻ
Đã trả lời thg 10 31, 2019 8:27 SA
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.

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí