Nuxt中服务端请求无法获取LocalStorage和Cookie的解决办法!

简介: Nuxt中服务端请求无法获取LocalStorage和Cookie的解决办法!

解决办法

在plugins中新建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) {
let obj = {}
if (value.loginState) {
      obj = {
token: value.token,
shopId: value.shopId,
loginState: value.loginState
      }
    } else {
      obj = {
token: '',
shopId: '',
loginState: false
      }
    }
return Cookies.set(key, obj, {
expires: 3,
secure: false
    });
  },
removeItem: function (key) {
return Cookies.remove(key);
  }
};
export default (context) => {
  createPersistedState({
storage: cookieStorage,
getState: cookieStorage.getItem,
setState: cookieStorage.setItem,
removeState: cookieStorage.removeItem,
  })(context.store);
};

使用方法

在nuxt.config.js中设置

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

定义好以上方法后,我们在获取到vuex数据的时候就会调用对应的getItem 和 setItem方法,将vuex的内容写入到cookie中。

那我们就可以通过在asyncData中 app 默认值中获取到cookie中写入的数据。

async asyncData({ app, route, context, store }) {
let token = "";
let shopId = "";
if (
      app &&
      app.context &&
      app.context.req &&
      app.context.req.headers &&
      app.context.req.headers.cookie
    ) {
let arrCookie = app.context.req.headers.cookie.split(";");
let cookie = arrCookie.find(item => item.split("=")[0] === " vuex");
if (cookie) {
if (cookie.split("=")[1] != "") {
let cookieData = JSON.parse(
            decodeURIComponent(cookie ? cookie.split("=")[1] : "")
          );
          token = cookieData.token;
          shopId = cookieData.shopId;
        }
      }
    }
}
相关文章
|
1月前
|
存储 Java 程序员
【HTTP】请求“报头”,Referer 和 Cookie
【HTTP】请求“报头”,Referer 和 Cookie
35 1
【HTTP】请求“报头”,Referer 和 Cookie
|
25天前
|
存储 JavaScript 前端开发
vuex和localstorage . cookie的区别
【10月更文挑战第8天】
47 1
|
6月前
发送带cookie的请求
发送带cookie的请求
56 1
|
3月前
|
存储 JavaScript 前端开发
学习vuex和localstorage . cookie的作用与区别
探讨Vuex、LocalStorage与Cookie:三种关键技术在现代Web开发中的角色。Vuex作为Vue的状态管理工具,提供集中、响应式且可预测的状态变更机制,适用于复杂应用。LocalStorage为客户端提供大容量、持久化的数据存储方案,适合保存用户偏好等静态信息。Cookie则擅长会话跟踪与认证管理,数据虽小却能在客户端与服务器间传递。每种技术针对不同场景各有优势,合理选用是关键。
|
1月前
|
存储 缓存 JavaScript
cookie和localStorage的区别特点
cookie和localStorage的区别特点
85 0
|
2月前
|
存储 编解码 JSON
解决浏览器存储问题,不得不了解的cookie、localStorage和sessionStorage
该文章详细对比了浏览器存储机制中的cookie、localStorage和sessionStorage的不同之处,以及各自的适用场景。
|
3月前
|
存储 缓存 JavaScript
cookie和localStorage的区别特点
cookie和localStorage的区别特点
43 0
|
4月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
135 0
|
5月前
|
存储 移动开发 JavaScript
对于session、cookie、 localStorage和SessionStorage的理解
对于session、cookie、 localStorage和SessionStorage的理解
59 0
|
6月前
|
存储 JavaScript 前端开发
JavaScript中的cookie、localStorage的区别和特点
JavaScript中的cookie、localStorage的区别和特点
68 6