nuxt如何处理用户登录状态持久化:nuxtServerInit 页面渲染前的store处理

2019 年 11 月 30 日 3 条评论 3.57k 次阅读 4 人点赞

在一般的vue-cli项目中,我们可以用vuex-persistedstate,它可以使vuex的状态持久化,页面刷新都不会丢失,原理当然是localStorage啦!当然也可以使用vue-cookies进行保存token,那么问题来了,nuxt项目怎么保存登录状态呢?虽然上面这两种方法我们都可以使用,但是有个问题,由于在created钩子中不存在window对象(获取cookie、localStorage都需要window对象),比如想要获取登录状态即判断是否存在token时,只能在mounted中进行操作,但这样又会引发一个问题,就是进页面的一瞬间还是无法得知登录状态,体验上会有影响,会存在显示用户名等组件显示隐藏延迟。

nuxt非常友好,它提供了fetch钩子,还有nuxtServerInit,这两个钩子都运行在服务端并且我们能很快速地操作store

1、fetch的使用

如果页面组件设置了fetch方法,它会在组件每次加载前被调用(在服务端或切换至目标路由之前),此方法需要跟服务端的人员配合

<script>
export default {
  async fetch ({ app, store, params }) {
    let { res } = app.$axios.get('/token');
    store.commit('setToken', res.data.token);
  }
}
</script>

2、nuxtServerInit

状态树文件中指定了nuxtServerInit方法,nuxtJs调用它的时候会将页面的context上下文对象作为第2个参数传给它以供服务端调用,与fetch一样,不包括context.redirect和context.error方法,具体哪些参数可以查看官方文档当我们想要将服务端的一些数据传到客户端,可以通过这个获取保存在状态中,客户端再从状态里取出来就好了。

nuxtServerInit:先把token存入cookie,这样每次请求都会自带cookie,那么利用nuxtServerInit里的参数 {req, res},去获取到请求附带的cookie,然后解析出token,然后再存入vuex。
推荐使用cookie插件cookie-universal-nuxt

<script>
import Vuex from 'vuex'

let store = () => new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    setToken (state, token) {
       state.token = token
    }
  },
  actions: {
    nuxtServerInit({ commit }, { req }) {
      const cookie = req.headers.cookie
      // 将cookie转成json对象(自己实现该方法)
      const token = cookieparse(cookie).token
      
      // 推荐使用cookie-universal-nuxt插件
      // nuxt.config.js 配置modules
      // ['cookie-universal-nuxt', { parseJSON: false }],
      // 然后通过下面方式获取cookie
      // const token = app.$cookies.get('token')

      commit('setToken', token)
    },
  }
})

export default store
</script>
context上下文对象:
属性类型可用描述
appvue根实例客户端 & 服务端包含所有插件的根实例。例如:想使用axios,可以通过context.app.$axios获取
isClientBoolean客户端 & 服务端是否来自客户端渲染,废弃,请使用process.client
isServerBoolean客户端 & 服务端是否来自服务端渲染,废弃,请使用process.server
isStaticBoolean客户端 & 服务端是否通过nuxt generate
isDevBoolean客户端 & 服务端是否开发模式,在生产坏境的数据缓存中用到
isHMRBoolean客户端 & 服务端是否通过模块热替换,仅在客户端以dev模式
route路由客户端 & 服务端路由实例
storevuex数据客户端 & 服务端Vuex.sttore实例
envl Object客户端 & 服务端nuxt.config.js中的环境变量
paramsObject客户端 & 服务端route.params的别名
queryObject客户端 & 服务端route.query的别名
reqhttp.Request服务端Node.js API的Request对象。如果nuxt以中间件形式使用的话,这个对象就根据你所使用的框架(个人理解为页面)而定。nuxt generate 不可用
reshttp.Reponse服务端Node.js API的Reponse对象。如果nuxt以中间件形式使用的话,这个对象就根据你所使用的框架(个人理解为页面)而定。nuxt generate 不可用
redirectFunction服务端用于重定向另一个路由,状态码在服务端被使用,默认302 redirect([status,]path[,query])
errorFunction客户端 & 服务端前往错误页面,error(parmas),params包含statusCode和message字段
nuxtStateObject客户端nuxt状态
beforeNuxtRender(fn)Function服务端更新NUXT在客户端呈现的变量,具体了解请看官网

雷雷

这个人太懒什么东西都没留下

文章评论(3)

  • 轩轩

    let cookie = req.headers.cookie; 你最后nuxt generate的时候不会报错吗?

    2020 年 3 月 29 日
    • 雷雷

      @轩轩 我这里不会报错。nuxtServerInit 这里你可以通过req获取 也可以使用插件来获取cookie 比如 cookie-universal-nuxt, js-cookie 等

      2020 年 4 月 1 日
  • raymond

    nuxt store 中无法获得cookie和localStorage 的解决办法 : https://segmentfault.com/q/1010000017870467

    2020 年 9 月 1 日
  • (Spamcheck Enabled)