Получение нулевого токена на странице refre sh с использованием firebase.auth (). OAuthStateChanged - PullRequest
Новая
       43

Получение нулевого токена на странице refre sh с использованием firebase.auth (). OAuthStateChanged

0 голосов
/ 15 апреля 2020

Я занимаюсь разработкой веб-сайта, на котором использую Firebase и Vue js. Я делаю государственное управление с vuex. Я застреваю, когда ссылаюсь на sh страницу, которую токен не перезагружает. До сих пор я реализовал действие под названием autoSignIn, задача которого - держать пользователя зарегистрированным после refre sh страницы. Я попытался сделать то же самое с токеном, но, похоже, он не работает. Я не могу понять, что я делаю не так? Моя идея такова: когда пользователь обновляет sh страницу, он также должен перезагрузить токен, как это делается для аутентификации пользователя.

При перезагрузке страницы программа выполняет следующие действия: вызывает геттер и Получатель является нулевым. Затем вызовите действие autoSignIn.

¿Как я могу вызвать первый autoSignIn, когда страница Refre sh для токена? Потому что я делаю то же самое для аутентификации пользователей, и это работает

Это хорошая параграф для сохранения токена в хранилище сеансов, куки или localStorage?

Когда я впервые пою, все нормально, но когда refre sh страница, он показывает следующую ошибку. https://i.stack.imgur.com/Suhfl.png

Вот мой обработчик аутентификации, где я управляю аутентификацией пользователя на странице refre sh. 

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

    });

Внутри autoSignIn я реализовал код для фиксации токен в состоянии. 

 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')
        },
````

1 Ответ

0 голосов
/ 15 апреля 2020

Чтобы вы могли сделать токен постоянным во всем приложении, вы можете сохранить токен в локальном хранилище после входа в систему. 

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);

}
...