私のアプリは、Firebase API for User Authenticationを使用して、ログインステータスをVuexステートのブール値として保存します。
ユーザーがログインすると、ログインステータスを設定し、それに応じてログイン/ログアウトボタンを条件付きで表示します。
ただし、ページが更新されると、vueアプリの状態が失われ、デフォルトにリセットされます。
これにより、ユーザーがログインしていてページが更新された場合でも、ログインステータスが false に設定され、ユーザーがログインしたままであってもログアウトボタンの代わりにログインボタンが表示されるため、問題が発生します。...
この行動を防ぐために私は何をしますか。
クッキーを使おう。 または、他のより良いソリューションが利用可能です。..
-。
これは既知の使用例です。 さまざまなソリューションがあります。
たとえば、vuex-persistedstate
を使用できます。 これは、ページの更新間で状態を処理および保存するための「vuex」のプラグインです。
サンプルコード:
'vuex'から{Store}をインポートします。
createPersistedStateを「vuex-persistedstate」からインポートします。
*を「js-cookie」からのCookieとしてインポートします。
const store = new Store({。
//。 ...
プラグイン:[。
createPersistedState({。
getState:(key)=> Cookies.getJSON(key)、。
setState:(key、state)=> Cookies.set(key、state、{expires:3、secure:true})。
})。
]。
})。
``。
ここで行うことは簡単です。
0。 [`js-cookie`](https://www.npmjs.com/package/js-cookie)をインストールする必要があります。
1。 `getState`では、 `Cookie`から保存された状態をロードしようとします。
2。 「setState」では、状態を「Cookie」に保存します。
ドキュメントとインストール手順:https://www.npmjs.com/package/vuex-persistedstate。
Cookie / localStorageを使用してログインステータスを保存すると、状況によってはエラーが発生する可能性があります。
。
FirebaseはすでにlocalStorageでログイン情報を記録しています。有効期限とrefreshTokenが含まれています。
。
したがって、Vueが作成したフックと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.');
}
});
},
});
リロードするたびにヘッダーをリセットしてユーザーデータも取得することでこれを解決しました。何が良いのかわかりません。 ...
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()
})
}
}
}
})
})
VueX状態を作成するときは、セッション状態に保存します。 このようにして、ブラウザを閉じると情報が失われます。 これらの値はクライアントとサーバー間を移動するため、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();」を使用します。