使用 firebase.auth().oAuthStateChanged 在页面刷新时获取令牌 null

Question

我正在开发一个使用 Firebase 和 Vue js 的网站。我用 vuex 做状态管理。当我引用令牌未重新加载的页面时，我被卡住了。到目前为止，我已经实现了一个名为 autoSignIn 的操作，他的任务是在刷新页面后保持用户登录。我用令牌尝试了同样的方法，但它似乎不起作用。我无法找出我做错了什么？我的想法是：当用户刷新页面时，它还必须像用户身份验证一样重新加载令牌。

当重新加载页面时，程序的作用是： 调用getter，getter为空。然后调用动作 autoSignIn。

¿我如何调用第一个 autoSignWhen 页面刷新令牌？因为我对用户身份验证做同样的事情并且它的工作

将token保存在Session storage、cookies或localStorage中比较好？

当我第一次唱歌时它工作正常，但是当我刷新页面时，它显示下一个错误。 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)
        });

    });

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

Answer 1

为了让您在整个应用程序中真正使令牌一致，您可以在登录后将令牌存储在本地存储中。

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

每次重新加载页面时，您都可以从本地存储中获取令牌并将其保存在 vuex 中。你可以在plugins下创建一个js文件，里面有下面的代码。

export default ({store}) => {

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

  store.commit('retrieveToken', token);

}