框架背景:开发框架采用vue,需要更好的SEO,更快的内容到达时间,从浏览器看不到对服务器的请求接口,选用开箱即用的nuxtjs。

问题背景:1. 前后分离,需前端存储token及登录后的用户信息;

     2. vuex存储数据,当页面刷新时,数据会丢失;

     3. 鉴于第一点,采用localstorage或sessionStorage存储数据,页面刷新,数据不会丢失,BUT,localStorage or sessionStorage 是浏览器的对象,服务端渲染页面时,会提示undefined(毕竟服务器是没有这两个对象的);

解决措施: 采用session (本来采用的是express-session,但此模块为开发环境设计,在生产环境会警告可能内存泄漏,故采用cookie-session)

如下:

  1. 在项目根目录下新建server.js:

  

  代码如下:

  

const {Nuxt, Builder} = require('nuxt');
const bodyParser = require('body-parser');
const session = require('cookie-session');
const app = require('express')();
const router = require('express').Router()
// 用来封装req.body
app.use(bodyParser.json());
//session 来创建req.session
app.use(session({secret: 'gjr',resave: false,saveUninitialized: false,cookie: {maxAge: 2*24*60*60*1000}
}));// 发起post /api/login 请求完成企业用户登录,并添加该用户信息到req.session.firmUser
router.post('/api/login', (req, res) => {  // 收到express服务请求,进行如下处理if (req.body.token) {req.session.firmUser = { authStatus:req.body.authStatus, id: req.body.id, loginName: req.body.loginName, token: req.body.token}return res.json({ authStatus:req.body.authStatus, id: req.body.id, loginName: req.body.loginName, token: req.body.token})}res.status(401).json({message: '401 Bad credentials'})
});
// 发起post /api/logout 请求注销当前企业用户,并从req.session中移除
router.post('/api/logout', (req, res) => {delete req.session.firmUser;res.json({ok: true})
});
app.use(router);
// 我们用这些选项初始化 nuxt.js;
const isProd = process.env.NODE_ENV === 'production'
let config = require('../nuxt.config')
config.dev = !isProd;
const nuxt = new Nuxt(config);app.use(nuxt.render)// 生产模式不需要build
if(!isProd) {const builder = new Builder(nuxt)builder.build().catch((error) => {console.log(error)process.exit(1)})
}
app.listen(8081, function () {console.log('Server is listening on http://localhost:8081')
})

  需先安装:

npm install express cookie-session body-parser --save

  2. 在store的user.js中:

import axios from 'axios'
export default {state: {firmUser: null,clientUser: null,proUser: null},getters: {firmUser: state => state.firmUser,clientUser: state => state.clientUser,proUser: state => state.proUser},mutations: {SET_FIRMUSER: (state, user) => {state.firmUser = user;}},actions: {nuxtServerInit({commit}, {req}) { // 将本地服务端数据发送给浏览器if (req.session && req.session.firmUser) { commit('SET_FIRMUSER', req.session.firmUser)}},async firmLogin({commit}, {authStatus, id, loginName, token}) {try {const {data} = await axios.post('/api/login', {authStatus, id, loginName, token})  // 向express服务发起请求commit('SET_FIRMUSER', data)} catch (error) {if (error.response && error.response.status === 401) {throw new Error('bad error')}throw error}},async firmLogout({commit}) {await axios.post('/api/logout')commit('SET_FIRMUSER', null)}}
}

  3. 在login.vue中:

login() {this.$refs.form.validate(valid => {if (valid) {this.$fetch.post('/companyUser/login', this.form).then(res => { // 向后台请求this.$store.dispatch('firmLogin', res.data).then(() => { // 调用store的方法this.$router.push('/firm/center');});})}})
}

  以上,token信息或者用户信息就可以在本地服务及浏览器中共享了,且刷新页面不会丢失。

  下一节讲启动服务,以及在服务器上怎么用pm2部署nuxtjs程序。

  

转载于:https://www.cnblogs.com/sloane/p/8652709.html

搭建nuxtjs程序 —— 用户信息 or token怎么不丢失相关推荐

  1. 获取小程序用户信息+java_java获取微信小程序用户信息

    第一步:获取openid.session_key等信息. /** * 获取微信小程序的用户openid和session_key/unionid * 返回格式:{"session_key&qu ...

  2. 微信小程序用户信息解

    微信小程序用户信息解密 问题描述 当小程序在获取用户信息或者获取手机号的时候,用户微信接口返回的是AES加密之后的数据,所以需要解决 方法 就拿获取手机号来讲,前端通过微信接口: Page({getP ...

  3. qq小程序绑定服务器,QQ小程序 用户信息

    小程序登录 小程序可以通过QQ官方提供的登录能力方便地获取QQ提供的用户身份标识,快速建立小程序内的用户体系. 登录流程时序 说明: 调用 qq.login() 获取 临时登录凭证code ,并回传到 ...

  4. uniapp 小程序用户信息接口被收回暂行解决方法

    https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01?page=4 官方文档说了 ...

  5. 商户后台返回数据签名错误_微信小程序 用户信息开放数据校验与解密

    服务端获取开放数据 小程序可以通过各种前端接口获取微信提供的开放数据.考虑到开发者服务端也需要获取这些开放数据,微信提供了两种获取方式: 方式一:开发者后台校验与解密开放数据 方式二:云调用直接获取开 ...

  6. 公众号关联小程序用户信息获取问题

    进入小程序 1.openid获取 - 从公众号菜单或者转发分享等形式进入小程序的,如果需要获取用户的openid,仅仅在app.js执行登陆方法或者在配置的主页面调用登陆方法是不够的 - 如果公众号菜 ...

  7. 采用redis+ThreadLocal获取全局的登录用户信息(二)增加token快失效时刷新

    在写token登录的时候,发现cookie中的token到时自动失效,如果此时有人正在操作,非常影响体验,于是增加了一个token快失效时刷新token的功能.下面代码重点就在TokenTool类中的 ...

  8. 微信小程序获取用户信息流程(2022年版)

     开门见山地说,本文主要讲述微信小程序在2022年以后获取用户信息的主要方法,如果想要了解2022年之前微信小程序获取用户信息的相关知识或者是微信小程序之前这部分的设计思想的话,推荐博主的下面这篇博客 ...

  9. 微擎联动的小程序本地测试获取获取用户信息失败

    (因为csdn) 背景: 嗯嗯,就是获取open id的为null.看到开发这工具. 然后后面就卡在这里了,所以测试环境算是没有弄好. 解决过程: 1.只能说本地host以及vhost已经配置好一个s ...

最新文章

  1. Android应用程序注冊广播接收器(registerReceiver)的过程分析
  2. 在表空间有足够free space的情况下出现ORA-1652
  3. 大型网站架构演化(二)——应用服务和数据服务分离
  4. array python 交集_模糊数学Python库简介和评测
  5. 软件测试知识产权保护,一种软件测试方法及软件测试系统专利_专利申请于2017-09-07_专利查询 - 天眼查...
  6. 关于MySQL的存储函数(自定义函数)的定义和使用方法详解
  7. Atitit pwa app prblm sulo目录1.1.1. 安卓的chrome没有弹添加到桌面的弹窗 11.1.2. 如何判断是否从主屏幕访问 11.1.3. 如何监听添加到桌面事
  8. 数学模型:优化模型(一)存贮问题
  9. 利用人性做大闸蟹,给予客户特殊的身份优越感,思维决定财富!
  10. 区块链对于相关流程和环节的联系,让元宇宙不再是虚无缥缈的概念
  11. Cocos2d-x 3.x 如何编译成安卓程序
  12. HSI、HSV、RGB、CMY、CMYK、HSL、HSB、Ycc、XYZ、Lab、YUV颜色模型
  13. SpringBoot《第二课》
  14. 对于Linux基础网络设置
  15. Android QQ空间(Apad)项目总结(三)---应用UI框架的搭建!!!
  16. vscode好看的吸血鬼主题设置
  17. 计算机科学导论第五章计算机组成课后答案,计算机科学导论第五章计算机组成.ppt...
  18. 地图导航开启蓝牙后无导航语音
  19. Spring学习第6篇: 基于注解使用IOC
  20. Notepad++最新版简体中文的GitHub下载

热门文章

  1. grpc 可以传递context嘛_Python中使用gRPC方法示例
  2. php.ini 忽略警告,配置php.ini去掉警告信息
  3. 如何判定括号是否匹配
  4. mysql双活存储容量 TB_Mysql双活方案 - osc_fted3syf的个人空间 - OSCHINA - 中文开源技术交流社区...
  5. 计算机主机名在哪里看win7,大师教您win7系统查看win7系统电脑主机名的图文步骤...
  6. pythonunicode和str_python2 中 unicode 和 str 之间的转换及与python3 str 的区别
  7. 强化学习组队学习task04—— DQN 算法及 Actor-Critic 算法
  8. 【Python数据分析】时间序列分析——AR/MA/ARMA/ARIMA
  9. 爱奇艺NLP:BiLSTM_CRF的关键词自动抽取
  10. resnet预训练模型_干货 | NLP中的十个预训练模型