web-dev-qa-db-ja.com

ページ更新時のVuex状態

私のアプリは、ユーザー認証にFirebase APIを使用し、ログイン状態をVuex状態のブール値として保存します。

ユーザーがログインするときにlogin statusを設定し、それに応じてLogin/Logoutボタンを条件付きで表示します。

しかし、ページが更新されると、vueアプリの状態は失われ、デフォルトにリセットされます

これにより、ユーザーがログインしてページが更新されてもlogin statusがfalseに戻り、ログアウトボタンの代わりにログインボタンが表示される場合でも問題が発生します。ユーザーはログインしたままになりますが...

この動作を防止するために何をすべきか

cookiesを使用するか、他のより良い解決策を利用できますか...

    -
vue.jsvuejs2statevuex
57
boomerboy

これは既知のユースケースです。さまざまな解決策があります。

たとえば、 vuex-persistedstate を使用できます。これはvuexのプラグインであり、ページの更新間で状態を処理および保存します。

サンプルコード：

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 })
    })
  ]
})

ここで行うことは簡単です。

  1. js-cookie をインストールする必要があります
  2. getStateで、保存された状態をCookiesからロードしようとします
  3. setStateで、状態をCookiesに保存します

ドキュメントとインストール手順： https://www.npmjs.com/package/vuex-persistedstate

64
sobolevn

Cookie/localStorageを使用してログインステータスを保存すると、状況によってはエラーが発生する場合があります。
Firebaseは、失効時刻と更新トークンを含むログイン情報をlocalStorageにすでに記録しています。
したがって、Vue createdフックとFirebase apiを使用して、ログインステータスを確認します。
トークンの有効期限が切れた場合、APIはトークンを更新します。
したがって、アプリのログインステータス表示が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.');
            }
        });
    },
});
5
oahehc

状態にする：

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

突然変異をつける：

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

私にとってはうまくいきます！

3
Leonardo Filipe

これを解決するには、ユーザーデータを取得するときに再読み込みするたびにヘッダーをリセットしますが、何が良いかわかりません...

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()
                            })
                    }
                }
            }
        })

})
2
Alenn G'Kar