+1
Vấn đề về nuxt auth và middleware vue
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
Thêm một bình luận
3 CÂU TRẢ LỜI
+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;
}
}
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;
},
@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?
@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
+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.
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.
