Firebase를 사용하여 페이지를 새로 고칠 때 토큰 null을 가져옵니다.auth(.oAuthStateChanged)

Firebase를 사용하여 페이지를 새로 고칠 때 토큰 null을 가져옵니다.auth(.oAuthStateChanged)

저는 파이어베이스와 Vuejs를 사용하는 웹사이트를 개발하고 있습니다.저는 vuex로 상태 관리를 합니다.페이지를 다시 읽을 때 토큰이 다시 로드되지 않습니다.지금까지 나는 autoSignIn이라는 작업을 구현했습니다. 그의 작업은 페이지를 새로 고친 후 사용자를 계속 기록하는 것입니다.저도 토큰으로 같은 방법을 시도해 봤는데, 작동이 안 되는 것 같습니다.제가 무엇을 잘못하고 있는지 알 수 없습니까?제 생각은 사용자가 페이지를 새로 고칠 때 사용자 인증과 마찬가지로 토큰을 다시 로드해야 한다는 것입니다.

페이지를 다시 로드할 때 프로그램이 수행하는 작업은 다음과 같습니다. getter를 호출하면 getter는 null입니다.그런 다음 작업을 autoSignIn이라고 부릅니다.

◦토큰을 위해 페이지 새로 고침 시 첫 번째 autoSignWhen을 어떻게 호출합니까?사용자 인증과 작업에 대해 동일한 작업을 수행하기 때문입니다.

세션 저장소, 쿠키 또는 로컬 저장소에 토큰을 저장하는 것이 좋은 방법입니까?

처음 로그인할 때는 정상이지만 페이지를 새로 고치면 다음 오류가 표시됩니다.https://i.stack.imgur.com/Suhfl.png

페이지 새로 고침에서 사용자 인증을 제어하는 인증 핸들러입니다.

router.beforeEach(async (to, from, next) => {
    const user = await new Promise((resolve) => {
        firebase.auth().onAuthStateChanged(async user => {
             await store.dispatch("autoSignIn", user),
            resolve(user)
        });

    });

Inside autoSignIni는 토큰을 상태로 커밋하는 코드를 구현했습니다.

 autoSignIn ({commit},payload) {

            if (payload !== null){
                commit('setUser',{email:payload.email, userId:payload.uid})
                payload.getIdTokenResult(true).then(token =>{
                    commit('setToken',token)
                    console.log(token)
                })
            }

        },

여기 제 증표가 있습니다.

 getToken:(state) => {
            return state.token !== null && state.user !== null ? state.token : null
        }
`````

I use getter in this action to retrieve certain depending on user role.

`````
getEventsByUser({getters,commit}){
            let data = [];

                if (getters.getToken.claims.admin) {
                    firebase.database().ref('usuario')
                        .on('value',event =>{
                            event.forEach(user =>{
                                user.child('eventos').forEach(evento =>{
                                    data.push({ "id": evento.key, ...evento.val() })
                                })
                            });
                            commit('setEventsByUser',data)
                        });

                }else if( getters.getToken.claims.student){
                    firebase.database().ref('usuario/' + getters.isAuthenticated.userId + '/eventos/')
                        .on("value", eventos =>{
                            eventos.forEach(evento =>{
                                data.push({"id":evento.key, ...evento.val()})
                            });
                            commit('setEventsByUser',data)
                        })
                }


        }
````

This is my componente from where i call the action getEventByUser for getting data.
````
computed:{
            getEventsByUser(){
                return  this.$store.getters.getEventsByUser;
            },

        },

        mounted() {
            this.$store.dispatch('getEventsByUser')
        },
````

응용프로그램 전체에서 실제로 토큰을 일치시키려면 로그인한 후 로컬 스토리지에 토큰을 저장할 수 있습니다.

const token = res.data.access_token;
localStorage.setItem('access_token', token);

페이지를 다시 로드할 때마다 로컬 스토리지에서 토큰을 가져와 vuex를 저장할 수 있습니다.플러그인 아래에 js 파일을 생성할 수 있으며 아래 코드가 있습니다.

export default ({store}) => {

  const token = localStorage.getItem('access_token') || null;

  store.commit('retrieveToken', token);

}

언급URL : https://stackoverflow.com/questions/61221470/getting-token-null-on-page-refresh-using-firebase-auth-oauthstatechanged