我想在Nuxt.js中的Vuex中使用window.localStorage

时间：2017-05-23 05:30:15

标签： authentication jwt vuejs2 vuex nuxt.js

我正在开发nuxt.js应用程序。点是登录＆amp;注销。

我们将开发JWT系统的登录信息。

您必须保持登录vuex。

但是，当我刷新页面时，会初始化vuex。

我读过git vuex-persistedstate，但很难理解如何初始化和设置它。

在nuxt.js中开发登录系统的最佳方法是什么？

感谢。

5 个答案:

答案 0 :(得分：9)

使用vuex-persisted state将是您的方案的最佳用例。

我将引导您完成使用vuex-persisted状态的过程。

  1. 打开命令行cd到项目目录，然后输入npm install --save vuex-persistedstate。这会将vuex-persistedstate安装到您的项目依赖项中。

  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包，这样可以更轻松地处理Cookie。使用npm install --save js-cookie。

  4. 路径属性说明要保留的状态的哪些部分，在我们的例子中保存为cookie。如果没有给出路径属性，那么整个状态将保持不变
  5. 从上面的示例中我们已经提到了路径paths: ['user', 'loggedIn']，因此只有用户和 loggedIn 属性保存在不是爱好的Cookie中即可。

  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-persisted state和js-cookie的使用方式，请查看他们的文档。

  9. 如果您想检查您所需的状态是否已保存在Cookie中，那么您可以在 App.vue created（）生命周期中通过控制台记录您的Cookie：console.log(document.cookie钩

答案 1 :(得分：3)

我使用了vuex-persist包，非常容易启动和运行。这也适用于SSR。

＆＃13;
＆＃13; 
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] : []
    })
}
＆＃13;
＆＃13;
＆＃13;

只需确保将所有内容调整为仅在浏览器中运行

答案 2 :(得分：0)

我强烈建议使用带有nuxt和vuex存储的localStorage上的cookie。使用诸如univeral-cookie和内置nuxtServerInit操作之类的包，您可以通过从服务器读取初始请求中的cookie来填充客户端和服务器存储。您可以使用cookie存储的数据量有限，但如果您实现类似RESTful的API并尽可能在您的cookie中存储ID，您可以在服务器端获取该数据以填充整个堆栈存储，从而设置自己在用户刷新页面的情况下非常好。我发现auth令牌非常方便，它们会在自己的cookie相关行为上失效，因此在页面刷新的情况下不会存在于商店中（或者它的变异处理解码数据）。

答案 3 :(得分：0)

最好使用cookie来保存授权令牌，请查看此nuxt模块

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

在vuex存储模块上设置样本以设置cookie 

//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中间件上的示例实现检查现有的cookie，然后将其注入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)
  }
}

答案 4 :(得分：0)

要在 nuxt 客户端和服务器中使用 vuex-persistedstate，请按照以下步骤操作。

例如，假设您有一个 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-persistedstate
<块引用>

npm install --save vuex-persistedstate

  1. 安装 cookie 和 js-cookie
<块引用>

npm install --save cookie js-cookie

之后你的 package.json 就像：

  "dependencies": {
    ...
    "cookie": "^0.3.1",
    "js-cookie": "^2.2.1",
    "vuex-persistedstate": "^4.0.0-beta.3",
    ...
  }
  1. 在 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)
}
  1. 将此插件添加到nuxt.config.js
plugins: [
    ...
    { src: '~/plugins/persistedState.js' }
    ...
  ],

这就够了！即使在客户端和服务器端刷新后，您也可以保留 user 模块。 无需更改 ~/store/index.js 文件

相关问题
最新问题