51dev.com IT技术开发者社区

51dev.com 技术开发者社区

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

代码星球阅读(43)2020-06-27 收藏0次评论

  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 { data } = app.$axios.get('/token');
    store.commit('setToken', data.token);
  }
}
</script>

2、nuxtServerInit

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

  终极无敌方法nuxtServerInit:先把token存入cookie,这样每次请求都会自带cookie,那么利用nuxtServerInit里的参数 {req, res},去获取到请求附带的cookie,然后解析出token,然后再存入vuex。

import Vuex from 'vuex'

let store = () => new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    setToken (state, token) {
       state.token = token
    }
  },
  actions: {
    nuxtServerInit({ commit }, { req }) {
      let cookie = req.headers.cookie;

      // 将cookie转成json对象(自己实现该方法)
      let token = cookieparse(cookie).token;
      commit('setToken', token);
    },
  }
})

export default store

 

以上就是nuxt如何处理用户登录状态持久化:nuxtServerInit 页面渲染前的store处理的全部内容。