内容来源：拉勾教育大前端高薪训练营
Nuxt.js是一个基于Vue.js的服务端渲染应用框架，关于Nuxt.js的更多介绍建议可以自行阅读 官方文档。 今天我们主要谈论的是有关登录状态的存储的内容，是结合cookie和vuex状态管理来实现的，这是我近期在学习拉勾教育的前端高薪训练营课程时得知的一种方案，如果有其他的方案欢迎分享。
store方便应用中组件间的共享
- 由于Nuxt.js已经集成了vuex，所以在Nuxt.js中使用vuex非常的简单，只需要在项目根目录下创建store/index.js即可，需要注意的是必须是store，因为nuxt发现store目录后会自动加载下面的容器模块，在index.js中无需创建store实例，直接定义并按需导出state，mutations、actions即可nuxt会加载并注册到容器当中。
// store/index.js
// 仅在服务端渲染时加载cookieparser
const cookieparser = process.server ? require('cookieparser') : undefined
// 在服务端渲染期间运行都是同一个实例
// 为了防止数据冲突，务必要把 state 定义成一个函数， 返回数据对象
export const state = () => {
return {
// 当前登录用户的登录状态
user: null
}
}
export const mutations = {
setUser (state, data) {
state.user = data
}
}
export const actions = {
// nuxtServerInit 是一个特殊的 action 方法，这个action 会在服务端渲染期间自动调用，且仅在服务端渲染时运行
// 主要作用是：初始化容器数据，传递数据给客户端使用
nuxtServerInit ({ commit }, { req }) {
let user = null
// 如果请求头中有 Cookie
if (req.headers.cookie) {
// 使用 cookieparser 把cookie 字符串转换为 JavaScript 对象， 使用前需要安装
const parsed = cookieparser.parse(req.headers.cookie)
try {
user = JSON.parse(parsed.user)
} catch (err) {
// NO valid cookie found
}
}
// 提交 mutation 修改 state 状态
commit('setUser', user)
}
}
2.登录成功后把用户信息存储到store中
// pages/login/index.vue
export default {
name: 'LoginIndex',
methods: {
login() {
setTimeOut(()=>{ // 定时器模拟api请求
const user = {
username: 'Tom'，
password: '123',
token: 'this is a token'
}
// 把用户信息存储到store中方便组件间共享
this.$store.commit('setUser', user)
})
}
}
}
cookie存储是为了达到前后端共用的目的
3.为了防止页面刷新数据丢失，需要把用户信息持久化，及存储起来。但是不能使用本地存储，本地存储会导致服务端拿不到登录状态，所以我们可以把用户信息存储到cookie中。
// pages/login/index.vue
/*
* 安装js-cookie方便操作cookie
* npm i js-cookie
*/
// 因为js-cookie只需要在客户端使用，而服务端并不使用它，所以我们可以进行按需加载,仅在客户端加载
const Cookie = process.client ? require('js-cookie') : undefined
export default {
name: 'LoginIndex',
methods: {
login() {
...
// 为了防止刷新页面数据丢失，我们需要把数据持久化,把用户信息存储到cookie中，以便前后端都可以使用
Cookie.set('user', data.user）
})
}
}
}
