Nuxt.js의 Vuex에서 window.localStorage를 사용하고 싶다.

Nuxt.js의 Vuex에서 window.localStorage를 사용하고 싶다.

저는 nuxt.js 앱을 개발하고 있습니다.로그인 및 로그아웃이 포인트입니다.

---

JWT 시스템에 대한 로그인을 개발합니다.

vuex에 로그인한 상태로 있어야 합니다.

그러나 페이지를 새로 고치면 vuex가 초기화됩니다.

git vuex-persisted state는 읽어봤지만 초기화 및 설정 방법만 이해하기 어렵습니다.

nuxt.js에서 로그인 시스템을 개발하는 가장 좋은 방법은 무엇입니까?

고마워요.

vuex-peristed 상태를 사용하는 것이 시나리오에 가장 적합한 사용 사례입니다.

vuex-persisted 스테이트의 사용 프로세스에 대해 설명합니다.

1. .cd디렉토리로 하여 "Directory"를 입력합니다.npm install --save vuex-persistedstateVuex-state 스테이트
2. 이제 store.js 파일 또는 vuex 저장소에서 정의한 위치에 vuex-persistedstate 플러그인을 추가합니다.

import createPersistedState from "vuex-persistedstate";
import * as Cookie from "js-cookie";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    user: {
      name: "john doe",
      age: " 16",
    },
    loggedIn: false,
    hobbies: ["eating", "partying"],
  },
  plugins: [
    createPersistedState({
      paths: ["user", "loggedIn"],
      getState: (key) => Cookie.getJSON(key),
      setState: (key, state) =>
        Cookie.set(key, state, { expires: 1, secure: false }),
    }),
  ],
});

3. 또한 쿠키를 쉽게 다룰 수 있는 js-cookie 패키지도 필요합니다.사용하다npm install --save js-cookie.
4. paths 속성은 cookie로 저장되는 상태 부분을 나타냅니다.경로 속성이 지정되지 않은 경우 전체 상태가 유지됩니다.
5. 을 언급했습니다.paths: ['user', 'loggedIn']사용자 및 로그만 해당됩니다.주의 속성에서는 취미가 아닌 쿠키에 저장됩니다.
6. 스토어에서 모듈을 사용하는 경우 지속할 패트를 정의하는 방법은 다음과 같습니다.

import createPersistedState from "vuex-persistedstate";
import * as Cookie from "js-cookie";

import myModule from "./myModule";
import myAnotherModule from "./myAnotherModule";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    user: {
      name: "john doe",
      age: " 16",
    },
    loggedIn: false,
    hobbies: ["eating", "partying"],
  },
  modules: {
    myModule,
    myAnotherModule,
  },
  plugins: [
    createPersistedState({
      paths: ["user", "loggedIn", "myModule.<nameOfThePropretyInState>"],
      getState: (key) => Cookie.getJSON(key),
      setState: (key, state) =>
        Cookie.set(key, state, { expires: 1, secure: false }),
    }),
  ],
});

7. 경로에서 유지할 상태에 있는 모듈의 속성을 참조합니다.위의 예에서는 myModule에 대해 언급한 상태의 속성은 유지됩니다.myAnotherModule 상태는 경로에 기재되어 있지 않기 때문에 저장되지 않습니다.

8. 이상입니다. vuex-peristed state 및 js-cookie를 사용하는 방법을 사용자 지정하려면 해당 설명서를 참조하십시오.

9. 같이 수 .console.log(document.cookieApp.vue created() 라이프 사이클 훅에 포함시킵니다.

대신 vuex-persist 패키지를 사용했습니다.이 패키지는 매우 간단하게 기동할 수 있습니다.이것은 SSR에도 유효합니다.

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'

Vue.use(Vuex)
let vuexLocalStorage = null;

if (process.browser) {

    vuexLocalStorage = new VuexPersist({
      key: 'vuex', // The key to store the state on in the storage provider.
      storage: window.localStorage, // or window.sessionStorage or localForage
    })
}

export function createStore() {
    return new Vuex.Store({
        state: {
        
        },
        actions,
        mutations,
        getters,
        plugins: process.browser ? [vuexLocalStorage.plugin] : []
    })
}

모든 것을 브라우저에서 실행할 수 있도록 조건을 설정해 주세요.

쿠키를 사용하여 인증 토큰을 저장하는 것이 좋습니다. 이 nuxt 모듈을 참조하십시오.

https://github.com/microcipcip/cookie-universal/tree/master/packages/cookie-universal-nuxt

쿠키를 설정할 vuex 스토어 모듈의 샘플입니다.

//call async ajax request to get UUID
const uuidReq = await dispatch('getUUID')

if (uuidReq.hasOwnProperty('meta')) {
  commit('setState', {
    uuid: uuidReq.meta.links.me.meta.id,
    isLogin: true
  })

  // calculate expires
  const expDate = new Date()
  expDate.setTime(expDate.getTime() + (state.accExpKey - 0.3) * 1000)
  const expDate2 = new Date()
  expDate2.setTime(expDate.getTime() + 2592000 * 1000)

  const options = {
    path: '/',
    expires: expDate
  }
  const options2 = {
    path: '/',
    expires: expDate2
  }

  const cookieList = [{
      name: 'g_isLogin',
      value: true,
      opts: options2
    },
    {
      name: 'g_accKey',
      value: state.accKey,
      opts: options
    },
    {
      name: 'g_refKey',
      value: state.refKey,
      opts: options2
    },
    {
      name: 'g_userUUID',
      value: uuidReq.meta.links.me.meta.id,
      opts: options
    }
  ]
  this.$cookies.setAll(cookieList)
}

여기에서는 커스텀 Nuxt 미들웨어 구현 예를 사용하여 기존 쿠키를 확인하고 vuex 상태로 주입합니다.

export default function({ store, route, redirect, app }) {
  const isLogin = app.$cookies.get('g_isLogin') === 'true'
  const accKey = app.$cookies.get('g_accKey') || ''
  const refKey = app.$cookies.get('g_refKey') || ''
  const userUUID = app.$cookies.get('g_userUUID') || ''

  // console.warn('authenticated isLogin:', isLogin)

  // If the user authenticated
  if (isLogin) {
    store.commit('user/setState', {
      isLogin: isLogin,
      accKey: accKey,
      refKey: refKey,
      uuid: userUUID
    })
  } else {
    return redirect('/?prevURL=' + route.path)
  }
}

nuxt 및 vuex 스토어가 있는 localStorage에서 쿠키를 사용할 것을 강력히 권장합니다.univeral-cookie 및 삽입 nuxtServerInit 액션 등의 패키지를 사용하면 서버로부터의 초기 요구에 따라 쿠키를 읽어 클라이언트스토어와 서버스토어 양쪽을 채울 수 있습니다.쿠키를 사용하여 저장할 수 있는 데이터의 양은 제한될 수 있지만 RESTful과 유사한 API를 구현하고 가능하면 쿠키에 ID를 저장하면 사용자가 페이지를 새로 고칠 때 서버 측에서 데이터를 가져와 전체 스택스토어를 채울 수 있습니다.auth token에서도 매우 편리하다는 것을 알게 되었습니다.이 토큰은 쿠키와 관련된 동작으로 기한이 만료되므로 페이지가 갱신되었을 때 스토어(또는 변환 처리 디코딩된 데이터)에는 존재하지 않습니다.

사용하기 위해서vuex-persistedstate클라이언트와 서버 모두 nuxt로 다음 절차를 수행합니다.

예를 들어 다음과 같은 경우Vuex Module user그리고 당신은 그것을 지속하고 싶어합니다.refresh또는route다른 페이지로 이동합니다.

const user = {
    namespaced: true,
    state: () => ({
        name: 'geeekfa'
    }),
    mutations: {
        name(state, name) {
            state.name = name;
        },
    },
    getters: {
        name: (state) => {
            return state.name;
        },
    }
}
export default user

1. 설치, vuex-displaystate

npm install --save vuex-state

2. cookie & js-flash 설치

npm install --save cookie js-displays

그 후 당신의package.json다음과 같습니다.

  "dependencies": {
    ...
    "cookie": "^0.3.1",
    "js-cookie": "^2.2.1",
    "vuex-persistedstate": "^4.0.0-beta.3",
    ...
  }

3. 만들다persistedState.js에~/plugin/persistedState.js

// persistedState.js
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
import cookie from 'cookie'

export default ({ store, req }) => {
  createPersistedState({
    paths: ['user'], // your vuex module name
    storage: {

      getItem: (key) => {
        if (process.server) {
          const parsedCookies = cookie.parse(req.headers.cookie)
          return parsedCookies[key]
        } else {
          return Cookies.get(key)
        }
      },
   
      setItem: (key, value) =>
        Cookies.set(key, value, { expires: 365, secure: false }),
      removeItem: key => Cookies.remove(key)
    }
  })(store)
}

4. 이 플러그인을 에 추가nuxt.config.js

plugins: [
    ...
    { src: '~/plugins/persistedState.js' }
    ...
  ],

이정도면 충분해! 넌 참을 수 있어user클라이언트 측과 서버 측 모두에서 새로고침 후에도 모듈을 변경할 필요가 없습니다. ~/store/index.js파일

언급URL : https://stackoverflow.com/questions/44126493/i-want-to-use-window-localstorage-in-vuex-in-nuxt-js