Блог

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

nuxt.config.js

 module.exports = {
    router: {
        middleware: [
            'check-auth'
        ]
    }
}
  

middleware/check-auth.js

 import axios from 'axios';
export default async ({ store }) => {
    const token = store.getters['auth/token'];
    if (!!token) {
        axios.defaults.headers.common.Authorization = `Bearer ${token}`;
        if (!store.getters['auth/check']) {
            await store.dispatch('auth/fetchUser');
        }
    }else{
        delete axios.defaults.headers.common.Authorization;
    }
}
  

store/auth.js

 import axios from 'axios';
import Cookie from 'js-cookie';

export const state = () => ({
    user: null,
    token: null
});

export const getters = {
    user: state => state.user,
    token: state => state.token,
    check: state => state.user !== null
};

export const mutations = {
    setToken(state, token){
        state.token = token;
    },
    fetchUserSuccess(state, user){
        state.user = user;
    },
    fetchUserFailure(state){
        state.user = null;
    },
    logout(state){
        state.token = null;
        state.user = null;
    },
    updateUser(state, { user }){
        state.user = user;
    }
}

export const actions = {
    saveToken({ commit }, { token, remember }){
        commit('setToken', token);
        Cookie.set('token', token, { expires: remember ? 365 : null });
    },
    async fetchUser({ commit }){
        try{
            const { data } = await axios.get('/auth/user');
            commit('fetchUserSuccess', data);
        }catch(e){
            Cookie.remove('token');
            commit('fetchUserFailure');
        }
    },
    updateUser({ commit }, payload){
        commit('updateUser', payload);
    },
    async logout({ commit }){
        try{
            await axios.delete('/auth/authorizations');
        }catch(e){}
        Cookie.remove('token');
        commit('logout');
    }
}
  

utils/index.js

 export function cookieFromRequest(request, key){
    if (!request.headers.cookie) {
        return;
    }
    const cookie = request.headers.cookie.split(';').find(
        c => c.trim().startsWith(`${key}=`)
    );
    if (cookie) {
        return cookie.split('=')[1];
    }
}
  

страница/index.vue

 <template>
    <div>
        <template v-if="!user">
            <nuxt-link to="/login">Login</nuxt-link>
        </template>
        <template v-else>
            <nuxt-link to="/account">Account</nuxt-link>
        </template>
    </div>
</template>
<script type="text/javascript">
import { mapGetters } from "vuex";
export default{
    computed: mapGetters({
        user: 'auth/user'
    })
}
</script>
  

Каждый раз после входа в систему (был записан файл cookie и была получена информация о пользователе) я обновляю страницу, которую я всегда получаю Login вместо Account , но когда я пытаюсь перейти по другому URL, промежуточное программное обеспечение работает, и оно будет отображаться как Account .

Я надеюсь отобразить его до того, как html был отправлен клиенту, как я могу это сделать?

Извините за так много кодов, я не знаю, как воспроизвести его в изолированной среде, потому что он основан на API аутентификации. Большое спасибо за ваши мнения!