페이지 새로고침 또는 직접 액세스 후 vuex-module에서 인증에 액세스할 수 없음

페이지 새로고침 또는 직접 액세스 후 vuex-module에서 인증에 액세스할 수 없음

nuxt/auth 모듈을 사용하여 nuxt 웹 앱에 인증이 있습니다.또한 모듈러형 vuex 스토어를 사용하여 다양한 상태를 처리합니다.로그인 후 모든 것이 정상이며, 정상적으로 앱을 탐색할 수 있습니다.그러나 페이지를 새로고침하거나 URL을 통해 직접 액세스하려고 하면 사용자가 액세스할 수 없기 때문에 웹 앱 전체를 사용할 수 없게 됩니다.사용자 오브젝트에 접속하려고 합니다.this.context.rootState.auth.user페이지 분할 또는 직접 액세스 후에는 늘이 됩니다.이상하게도, 이것은 생산에서만 발생합니다.

이미 if-guard를 추가하려고 했지만 안타깝게도 getter가 반응하지 않습니다.아마도 그것이 중첩된 물체이기 때문일 것이다.이것이 현재 getter입니다.

 get someGetter() {
    if (!this.context.rootState.auth.user) {
      return []
    }
    const userId = this.context.rootState.auth.user.id as string
    const arr = []
    for (const item of this.items) {
        // Using userId to add something to arr
    }
    return arr
  }

vuex-modules를 초기화하기 전에 nuxt가 인증을 완료하도록 강제하거나 이 getter를 비활성화하여 사용자 개체에 액세스할 수 있을 때 다시 트리거되도록 하는 방법이 있습니까?

nuxt.config.ts의 auth-config는 다음과 같습니다.

auth: {
  strategies: {
    local: {
      _scheme: '@/auth/local-scheme',
      endpoints: {
        login: {
          url: '/api/authenticate',
          method: 'post',
          propertyName: false
        },
        logout: { url: '/api/logout', method: 'post' },
        user: { url: '/api/users/profile', propertyName: false }
      }
    },
    // This dummy setting is required so we can extend the default local scheme
    dummy: {
      _scheme: 'local'
    }
  },
  redirect: {
    logout: '/login'
  }
}

편집

나는 Raihan Kabir의 대답을 따라 이 문제를 해결했다.서버가 페이지를 렌더링할 때마다 트리거되는 auth-plugin에서 vuex-persisted state를 사용합니다.플러그인은 userId를 쿠키에 저장하기 때문에 auth-module이 준비되지 않은 경우 스토어에서 이를 폴백으로 사용할 수 있습니다.

중요한 건...vuex는 새로고침 또는 새로고침 시 데이터를 클리어하여 credential의 보안을 유지합니다.그렇구나vuex새로고침 후 중단 없이 데이터를 장기간 저장하려면 로컬 스토리지를 사용해야 합니다.그러나 로컬 저장소는 자격 증명을 저장하는 데 권장되지 않습니다.

필요한 경우만user_id보관하다vuex대신 Cookie를 사용합니다.그리고 이런 걸 너희 가게 가게에서 먹어봐index.js파일 -

export const actions = {
    // This one runs on the beginning of reload/refresh
    nuxtServerInit ({ commit }, { req }) {
        if (req.headers.cookie) {
              const parsed = cookieparser.parse(req.headers.cookie)
              try {
                  // get user id that you would set on auth as Cookie
                  user_id = parsed.uid
              } catch (err) {
                  // error here...
              }
        }

        // perform login and store info on vuex store
        commit('authUserOnReload', user_id)
    },
}

// Define Mutations
export const mutations = {
    authUserOnReload (state, user_id) {
        // perform login here and store user
    }
}

언급URL : https://stackoverflow.com/questions/60163870/auth-not-accessible-in-vuex-module-after-page-reload-or-direct-access