내 앱은 사용자 인증에 Firebase API를 사용하여 로그인 상태를 Vuex 상태에 부울 값으로 저장합니다.
사용자가 로그인 하면 로그인 상태를 설정하고 그에 따라 로그인 / 로그 아웃 버튼을 조건부로 표시합니다.
그러나 페이지를 새로 고치면 vue 앱의 상태가 손실되고 기본값으로 재설정됩니다.
사용자가 로그인하고 페이지를 새로 고쳐도 로그인 상태 가 다시 거짓으로 설정 되고 사용자가 로그인 상태를 유지하더라도 로그 아웃 버튼 대신 로그인 버튼이 표시되므로 문제가 발생합니다 ....
이 동작을 방지하려면 어떻게해야합니까?
쿠키를 사용할까요 아니면 다른 더 나은 솔루션을 사용할 수 있습니까?
답변:
이것은 알려진 사용 사례입니다. 다른 해결책이 있습니다.
예를 들어 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 플러그인을 사용하여 세션 저장소에 저장하십시오 . 이런 식으로 브라우저를 닫으면 정보가 손실됩니다. 이러한 값은 클라이언트와 서버간에 이동하므로 쿠키 사용을 피하십시오.
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()]
});
한 줄의 코드로 완벽하게 작동했습니다. plugins: [createPersistedState()]
쿠키 / 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()
})
}
}
}
})
})