초기 페이지 로드 시 사용자 가져오기 - Nuxt 미들웨어

초기 페이지 로드 시 사용자 가져오기 - Nuxt 미들웨어

Nuxt 앱에서 Firebase Auth를 사용하고 있는데 보호된 경로에 문제가 있습니다.사용자가 로그인했는지 여부에 따라 리디렉션을 처리하는 nuxt 미들웨어가 활성화되어 있습니다.

문제는 주소 표시줄에서 보호된 경로를 방문하여 이전에 로그아웃한 경우 해당 경로에 액세스할 수 있다는 것입니다.그러나 해당 경로에서 다른 보호된 경로를 방문하려고 하면 리디렉션됩니다.로그인한 사용자를 처리하기 위해 Vuex를 사용하고 있습니다.

보호된 경로를 위해 미들웨어를 '콜드 스타트' 상태로 만들려면 어떻게 해야 합니까?

미들웨어:router-auth.js

export default function({ store, redirect, route }) {
    const user = JSON.parse(store.state.Authentication.user)
    console.log(user);
    user !== null && route.name === '/' ? redirect('/dashboard') : ''
    //user === null && route.name !== '/' ? redirect('/dashboard') : ''
  }

플러그인:auth.js

import firebase from "firebase/app";
import "firebase/auth";

export default function ({store, router}) {
  firebase.auth().onAuthStateChanged((user) => {
      if(user){
        store.dispatch('Authentication/SET_USER',JSON.stringify(user))
      }else{
        store.dispatch('Authentication/SET_USER', null)
      }
  })
}

Vuex:Authentication.js

export const state = () => ({
    user: ''
});

export const getters = {
    user: state => {
      return state.user;
    },
  
  }

export const mutations = {
    SET_USER: (state, payload) => {
        state.user = payload;
    },
}

export const actions = {
    SET_USER({ commit }, payload) {
        commit('SET_USER', payload)
    },
}

미들웨어에서는 다음 에러 펑크콜을 반환할 수 있습니다.

export default function({ store, redirect, route, error }) {
  const accessDenied = true // ... your access route logic goes here
  if (accessDenied) {
    return error({
      message: 'access denied',
      statusCode: 403
    })
  }
}

언급URL : https://stackoverflow.com/questions/64268167/get-user-on-initial-page-load-nuxt-middleware