Nuxt.js 저장소에서 localStorage를 사용하는 방법

Nuxt.js 저장소에서 localStorage를 사용하는 방법

나는 nux.js 프로젝트를 하고 있다.여기, 나는 사용하고 싶다.localStorage안쪽에Nuxt-Store그리고 또한 이 웹사이트에 접속하기를 원한다.localStorage로부터의 가치를 평가하다.Nuxt-Middleware에러가 발생했어.

localStorage가 정의되지 않음.

내가 어떻게 이 문제를 해결할 수 있을까?

코드 샘플:

setUser(state, { user }){
    state.user = user
    state.isLoggedIn = true
    localStorage.setItem('user', JSON.stringify(user));
    localStorage.setItem('isLoggedIn', state.isLoggedIn);
},

내 미들웨어 코드는 여기 있어

export default function({ store, redirect, route}) {
const user = localStorage.getItem('user');
const loggedStatus = store.getters['isLoggedIn']

if (user) {
    if(route.path == '/login' || route.path == '/user/temporary'){
        return redirect('/')
    } 
       return 
}


if(!user){
    return redirect('/login')
}

}

클라이언트 쪽에서만 이 코드를 실행하려면 미들웨어에 논리를 추가해야 한다.더 읽으려면 문서를 확인하십시오.

유니버설 모드에서는 미들웨어를 서버측(Nuxt 앱에 대한 첫 번째 요청 시 또는 페이지 새로 고침 시)으로 한 번 부르고, 추가 루트로 이동할 때는 클라이언트측으로 부른다.SPA 모드에서는 첫 번째 요청과 추가 경로 탐색 시 미들웨어가 클라이언트 측으로 호출된다.

미들웨어 기능에 다음을 추가하십시오.

export default function({ store, redirect, route }) {

  // Do not run on server
  if (process.server) {
    return
  }

  const user = localStorage.getItem('user')
  const loggedStatus = store.getters['isLoggedIn']

  if (user) {
    if (route.path == '/login' || route.path == '/user/temporary') {
      return redirect('/')
    }
    return
  }

  if (!user) {
    return redirect('/login')
  }
}

SPA 모드에서 실행 중이면 완료.이 미들웨어는 페이지 사이를 이동하는 동안 초기 및 모든 로드에 대해서만 클라이언트에서 실행된다.

이제 유니버설 모드에서 실행 중인 경우 이 미들웨어는 더 이상 서버에서 실행되지 않을 뿐만 아니라 첫 번째 애플리케이션 로딩에서도 실행되지 않을 것이다.

유니버설 모드에서는 미들웨어를 서버측(Nuxt 앱에 대한 첫 번째 요청 시 또는 페이지 새로 고침 시)으로 한 번, 추가 경로로 이동할 때 클라이언트측으로 호출한다.

이 문제를 해결하는 가장 쉬운 방법은 클라이언트에서만 실행되는 플러그인을 추가하는 것이다.이 문제를 해결하려면 이 플러그인을nuxt.config.js, .client postfix 추가 주의:

// nuxt.config.js
export default {
  plugins: [
    // .client will only be run client side on initial app load
    '~/plugins/init.client.js'
  ]
}

이 플러그인 내에서 미들웨어와 동일한 논리를 정의할 수 있으며,

// /plugins/init.client.js
export default function({ store, redirect, route }) {

  const user = localStorage.getItem('user')
  const loggedStatus = store.getters['isLoggedIn']

  if (user) {
    if (route.path == '/login' || route.path == '/user/temporary') {
      return redirect('/')
    }
    return
  }

  if (!user) {
    return redirect('/login')
  }
}

이 예는 DRAY 원리에 정면으로 부딪히며, Nuxt에서 미들웨어의 한계를 연구하기 위한 예로서 의도되었다.

이것이 도움이 되기를!

localStorage를 nuxtjs로 직접 사용할 수 있다.

this.$auth.$storage.setLocalStorage(key, val)
this.$auth.$storage.getLocalStorage(key)
this.$auth.$storage.removeLocalStorage(key)

여기에서 설명서를 살펴보십시오.

참조URL: https://stackoverflow.com/questions/58153979/how-to-use-localstorage-in-nuxt-js-store