框架背景：开发框架采用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程序。

　　

 

版权声明：本文为sloane原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/sloane/p/8652709.html