Блог

Я хочу получать данные со своего сервера и использовать их в компонентах, но когда я извлек данные, я не хочу продолжать отправлять запросы на мой сервер.

Когда пользователь входит в систему, я извлекаю его данные и сохраняю их в SET_USER_INFO.

 async login({ commit, state }, account) {
        try{
            await auth.signInWithEmailAndPassword(account.email, account.password);

            if(!auth.currentUser.emailVerified){
                throw {
                        error: "Email didnot verified!",
                        code: "auth/email-unverified"
                    }
            }
            const token = await auth.currentUser.getIdToken(true);
            const { email, uid } = auth.currentUser;
    
            Cookie.set('access_token', token);

            commit('SET_USER', { email, uid });

            const path = '/api/fetch_user_info';
            const res = await this.$axios.get(path);
            commit('SET_USER_INFO', res.data);
 

но когда я пытаюсь получить доступ к данным из компонентов, они не определены

 methods: {
        test() {
            this.user_info = this.$store.state.users.user_info;
            console.log(this.$store.state.users.user_info);
        }
    },
    beforeMount() {
        this.test();
    },
 

Я пытался получить данные в функции nuxtServerInit, но все равно не могу получить доступ к данным из функций промежуточного программного обеспечения. Я много чего перепробовал. Если это непонятно, я могу добавить подробности.

Хорошо, я нахожу правильное решение.

Я добавляю следующие строки в функцию промежуточного программного обеспечения:

 export default async function ({ store, route, redirect, from, req }) {
    if (!from){
        let token = cookieparser.parse(req.headers.cookie).access_token;
        console.log('request send');
        await store.dispatch('users/getUserInfo', token);
    }
}
 

и мой getUserInfo выглядит так:

 async getUserInfo({ commit }, token=null) {
        let access_token;
        (token != null) ? access_token = token : access_token = Cookie.get('access_token');
        const path = '/api/get_user_info';
        const res = await this.$axios.get(path, {
            headers: {
                Authorization: `Bearer ${access_token}`
            },});
        commit('SET_USER_INFO', res.data);
}
 

Я думаю, что это правильное решение. Если вы поделитесь своими комментариями, я был бы рад

ссылка: https://www.youtube.com/watch?v=sSbahlvDfS4