H5W3
当前位置:H5W3 > 其他技术问题 > 正文

NUXT+express 中Vuex状态怎么保持安全

新手学习vue+nuxt;
遇到一个的问题,困惑很长时间。刷新页面时,nuxt中vuex状态安全的问题;
问题一、配合插件vuex-persistedstate进行本地化,但是在store/index.js中,设置该插件导致window对象找不到。如何才能用上vuex-persistedstate不出错?
问题二、在只存储少量关键数据(如登录uuid和用户名),用fetch请求服务端找关键数据(比如/api/getUserInf)。fetch放在项目结构的哪个位置比较好?是放在框架比较高层级的位置?还是哪个组件要用到store就在哪个组件放置?
问题三、fetch到底是在客户端运行的还是服务端运行的?
问题四、nuxtServerInit这个方案,如果是加密的cookie,在nuxtServerInit中就无法提取到userID,这个是否有方法解决?

回答:

一、如果是用Nuxtjs,请配置插件:

plugins: [
    { src: '~/plugins/localStorage.js', ssr: false }
],

然后,在localStorage.js中:


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

let cookieStorage = {
  getItem: function(key) {
    return Cookies.getJSON(key);
  },
  setItem: function(key, value) {
    return Cookies.set(key, value, {expires: 3, secure: false});
  },
  removeItem: function(key) {
    return Cookies.remove(key);
  }
};

export default (context) => {
  createPersistedState({
    storage: cookieStorage,
    getState: cookieStorage.getItem,
    setState: cookieStorage.setItem
  })(context.store);
};

二、Nuxtjs的fetch只用于store,不能用来设置数据,可以用AsyncData设置数据,用在路由页面即可。
三、fetch官方文档很清楚了:服务端或切换至目标路由之前
四、可以用nuxtServerInit+express session存储用户登录

本文地址:H5W3 » NUXT+express 中Vuex状态怎么保持安全

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址