Vue + Nuxt 服务端渲染从入门到放弃（2）

最新推荐文章于 2024-08-21 09:47:52 发布

-火星人-

最新推荐文章于 2024-08-21 09:47:52 发布

阅读量2.3k

点赞数 1

分类专栏：开发笔记文章标签： nuxt vue

本文链接：https://blog.csdn.net/qq_19671173/article/details/90759431

版权

本文介绍了在Nuxt.js项目中如何使用Vuex进行数据同步，并解决服务端渲染环境下身份验证的问题。通过引入cookie-universal-nuxt处理cookie，利用Vuex的nuxtServerInit方法初始化数据，结合自定义的中间件实现实现简单身份验证。此外，还创建了一个DataStore插件，简化在客户端和服务端之间判断存储方式的过程。

摘要由CSDN通过智能技术生成

放几个阿里云的优惠链接代金券 / 高性能服务器2折起 / 高性能服务器5折

上一篇将了如何项目的基本结构和如何创建。本文讲下服务端渲染的数据同步与Auth的Token问题。
本文额外使用cookie-universal-nuxt模块来快捷处理cookie。

Vuex使用

Nuxt集成了Vuex作为数据共享的组件，所以启用Vuex也非常简单。直接在store目录下新建index.js文件，创建Vuex有些区别，不推荐使用**export default new Vuex.Store（{}）**这种方式。官网给了例子，只需要直接export state, mutations, actions这些即可。Nuxt还提供了nuxtServerInit方法用户服务端初始化时数据的处理。其他的调用方式基本和客户端渲染时一样。

export const state = () => ({
   
  token: null
})
export const mutations = {
   
  setToken(state, token) {
   
    state.token = token
  }
}

实现简单的身份验证

由于Nuxt服务端不存在localStorage这些在window上的对象，所以不能使用这些在服务端上存数数据。因此需要通过Vuex将数据进行同步。

其实服务端可以实现自己的数据存储方式，毕竟大部分情况下Nuxt都是部署在Node服务器下的，完全可以通过Node的数据存储方案来实现。

虽然Nuxt给出了一个auth-module用于做身份验证，但是对于简单的应用来说并完全可以通过Vuex来自己实现相应的功能。在上面已经设置了token属性，下面来演示如何使用。
首先前端的token采用存储在cookie上面，这样每次请求时会自动发送token。
添加nuxtServerInit来获取请求中的token。当不存在对应的cookie时则认为当前没有通过身份验证。相应的页面显示和逻辑自行实现。

export const actions = {
   
  nuxtServerInit({
   commit}, {
   app}) {
   
    let token = app.$cookies.get('token')
    commit('setToken', token)
  }
}

创建auth.js中间件检测token

export default function ({
    store, redirect }) {
   
  // 如果用户未经过身份验证
  if (!store.state.token) {
   
    return redirect('/login')
  }
}

在nuxt.config.js中配置中间件,也可以针对单独页面配置。

  router: {
    middleware: 'auth'
  },

这样当没有登陆的用户访问时会被重定向到login页面进行登陆。当登陆成功后将token写入cookie即可实现一个简单的身份认证功能（需要判断process.browser来确认是否是浏览器，只有浏览器才有cookie保存的功能）。

实现一个DataStore来完成数据的存取

上面虽然实现了数据的共享，但是对于一些数据每次都需要判断是否是浏览器环境显的有些繁琐，下面来实现一个插件来免去这些判断。

创建一个接口定义

定义一些基本的方法。

export class DataStore {
   
  setItem(key, value) {
   
  }

  getItem(key) {
   
  }

  getKeys() {
   
  }

  removeItem(key) {
   
  }

  clear() {
   
  }
}

实现一个Cookie的存储

import Cookies from 'js-cookie'

export class CookieStore extends DataStore {
   
  name = 'CookieStore'
  prefix = ''
  _keys = '__cookieds_keys__'
  expires = 365

  constructor