坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › Nuxt中服务端请求无法获取LocalStorage和Cookie的解决办法!

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

坚果大叔
2021-09-03 17:12:27技术阅读 3,115

解决办法

在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;
        }
      }
    }
}
Nuxt
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 坚果大叔。未经许可,禁止转载。
生活就是每一帧每一秒
上一篇
又是周六的一天。
下一篇
在小程序中查看
搜你想看的
聚合文章
如何激活Windows10?
那天老家下雪❄️
生活就是每一帧每一秒
instanceof和typeof的区别
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
559 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
5,004 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,333 5 2
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,037 4
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢