私のアプリはユーザー認証にFirebaseAPIを使用しており、ログインステータスをブール値としてVuex状態で保存しています。
ユーザーがログインすると、ログインステータスを設定し、それに応じて[ログイン/ログアウト]ボタンを条件付きで表示します。
ただし、ページが更新されると、vueアプリの状態は失われ、デフォルトにリセットされます
これにより、ユーザーがログインしてページが更新された場合でも、ログインステータスがfalseに戻され、ユーザーがログインしたままでもログアウトボタンの代わりにログインボタンが表示されるため、問題が発生します。
この動作を防ぐにはどうすればよいですか
クッキーを使用します か、それとも他のより良い解決策が利用可能です...
回答:
これは既知のユースケースです。さまざまな解決策があります。
たとえば、を使用できます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 })
})
]
})
ここで行うことは簡単です。
js-cookiegetState私たちから保存された状態をロードしようCookiessetStateに私たちの状態を保存し、我々Cookiesドキュメントとインストール手順：https：//www.npmjs.com/package/vuex-persistedstate
VueX状態を作成するときは、vuex-persistedstateプラグインを使用してセッションストレージに保存します。このように、ブラウザを閉じると情報が失われます。これらの値はクライアントとサーバー間を移動するため、Cookieの使用は避けてください。
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: {
//....
}
});
sessionStorage.clear();ユーザーが手動でログアウトするときに使用します。
vuex-persistedstate.es.js?0e44:1 Uncaught (in promise) TypeError: Converting circular structure to JSON
Vuexの状態はメモリに保持されます。ページの読み込みにより、この現在の状態が削除されます。これが、リロード時に状態が持続しない理由です。
しかし、vuex-persistedstateプラグインはこの問題を解決します
npm install --save vuex-persistedstate
これをストアにインポートします。
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()]
});
1行のコードで完全に機能しました。 plugins: [createPersistedState()]
ログインステータスを保存するためにcookies / localStorageを使用すると、状況によってはエラーが発生する可能性があると思います。
Firebaseは、expirationTimeとrefreshTokenを含むログイン情報をlocalStorageにすでに記録しています。
したがって、Vueで作成されたフックとFirebaseAPIを使用してログインステータスを確認します。
トークンの有効期限が切れている場合、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.');
}
});
},
});
再ロードするたびにヘッダーをリセットしてユーザーデータをフェッチすることでこれを解決しましたが、何が良いのかわかりません...
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()
})
}
}
}
})
})