Trạng thái Vuex khi làm mới trang

Ứng dụng của tôi sử dụng API Firebase để Xác thực người dùng, lưu trạng thái Đăng nhập dưới dạng giá trị boolean trong Trạng thái Vuex.

Khi người dùng đăng nhập, tôi đặt trạng thái đăng nhập và có điều kiện hiển thị nút Đăng nhập / Đăng xuất tương ứng.

Nhưng khi trang được làm mới, trạng thái của ứng dụng vue sẽ bị mất và được đặt lại về mặc định

Điều này gây ra sự cố vì ngay cả khi người dùng đã đăng nhập và trang được làm mới, trạng thái đăng nhập được đặt lại thành false và nút đăng nhập được hiển thị thay vì nút đăng xuất mặc dù người dùng vẫn đăng nhập ....

Tôi phải làm gì để ngăn chặn hành vi này

Tôi sẽ sử dụng cookie Hoặc bất kỳ giải pháp nào khác tốt hơn có sẵn ...

-

Đây là một trường hợp sử dụng đã biết. Có nhiều giải pháp khác nhau.

Ví dụ, người ta có thể sử dụng vuex-persistedstate. Đây là một plugin vuexđể xử lý và lưu trữ trạng thái giữa các lần làm mới trang.

Mã mẫu:

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

Những gì chúng tôi làm ở đây rất đơn giản:

1. bạn cần cài đặt js-cookie
2. trên getStatechúng tôi cố gắng tải trạng thái đã lưu từCookies
3. trên setStatechúng tôi lưu trạng thái của chúng tôi đểCookies

Tài liệu và hướng dẫn cài đặt: https://www.npmjs.com/package/vuex-persistedstate

Khi tạo trạng thái VueX của bạn, hãy lưu nó vào bộ nhớ phiên bằng cách sử dụng plugin vuex-persistedstate . Bằng cách này, thông tin sẽ bị mất khi đóng trình duyệt. Tránh sử dụng cookie vì những giá trị này sẽ di chuyển giữa máy khách và máy chủ.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
    })],
    state: {
        //....
    }
});

Sử dụng sessionStorage.clear();khi người dùng đăng xuất theo cách thủ công.

Trạng thái Vuex được giữ trong bộ nhớ. Tải trang sẽ xóa trạng thái hiện tại này. Đây là lý do tại sao trạng thái không tiếp tục tải lại.

Nhưng vuex-persistedstateplugin giải quyết vấn đề này

npm install --save vuex-persistedstate

Bây giờ nhập cái này vào cửa hàng.

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    account,
  },
  plugins: [createPersistedState()]
});

Nó hoạt động hoàn hảo với một dòng mã: plugins: [createPersistedState()]

Tôi nghĩ rằng việc sử dụng cookie / localStorage để lưu trạng thái đăng nhập có thể gây ra lỗi trong một số trường hợp.
Firebase đã ghi lại thông tin đăng nhập tại localStorage cho chúng tôi bao gồm expirationTime và refreshToken.
Do đó, tôi sẽ sử dụng Vue tạo hook và Firebase api để kiểm tra trạng thái đăng nhập.
Nếu mã thông báo đã hết hạn, api sẽ làm mới mã thông báo cho chúng tôi.
Vì vậy, chúng tôi có thể đảm bảo hiển thị trạng thái đăng nhập trong ứng dụng của chúng tôi bằng Firebase.

new Vue({
    el: '#app',
    created() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                log('User is logined');
                // update data or vuex state
            } else {
                log('User is not logged in.');
            }
        });
    },
});

đưa vào trạng thái:

producer: JSON.parse(localStorage.getItem('producer') || "{}")

đưa vào các đột biến:

localStorage.setItem("producer",JSON.stringify(state.producer)) // OR
localStorage.removeItem("producers");

hoạt động tốt cho tôi!

Tôi đã giải quyết vấn đề này bằng cách đặt lại tiêu đề của mình mỗi khi tải lại cũng tìm nạp dữ liệu người dùng, tôi không biết cách nào tốt hơn ...

new Vue({
    el: 'vue',
    render: h => h(VueBox),
    router,
    store,

    computed: {
        tokenJWT () {
            return this.$store.getters.tokenCheck
        },
    },


    created() {
        this.setAuth()

    },

    methods:
        Object.assign({}, mapActions(['setUser']), {

            setAuth(){
                if (this.tokenJWT) {
                    if (this.tokenJWT === 'expired') {
                        this.$store.dispatch('destroyAuth')
                        this.$store.dispatch('openModal')
                        this.$store.dispatch('setElModal', 'form-login')

                    } else {
                        window.axios.defaults.headers.common = {
                            'Accept': 'application/json',
                            'Authorization': 'Bearer ' + this.tokenJWT
                        }
                        axios.get( api.domain + api.authApi )
                            .then(res => {
                                if (res.status == 200) {
                                    this.setUser( res.data.user )
                                }
                            })
                            .catch( errors => {
                                console.log(errors)
                                this.destroyAuth()
                            })
                    }
                }
            }
        })

})