欢迎访问 歪脖札记~

nuxt处理用户登录状态持久化

vue-cli项目中,我们可以用vuex-persistedstate,它可以使vuex的状态持久化,页面刷新都不会丢失,原理当然是localStorage啦!当然我更喜欢用vue-cookies进行保存token,问题来了,nuxt项目怎么保存登录状态呢?当然上面这两种方法我们都可以使用,但是有个问题,由于在created钩子中不存在window对象(获取cookie、localStorage都需要window对象),当你需要判断是否存在token的时候,你必须要在mounted进行操作,这说明页面进来的一瞬间你无法得知是否已经登录了,这会导致显示用户名、组件显示于隐藏都慢半拍

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

一:fetch的使用

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

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

二:nuxtServerInit的使用

终极无敌方法

import cookieparse from '~/assets/js/cookieparse.js';

export const state = () => ({
  token: ""
})

export const mutations = {
  changeToken: function(state, token){
    state.token = token;
  }
}

export const actions = {
  nuxtServerInit({commit}, {req}) {
    let cookie = req.headers.cookie;
    // 将cookie转成json对象
    let token = cookieparse('token', req);
    commit('changeToken', token?token:"");
  } 
}          

cookieparse.js

export default (cname, req) => {
  let name = cname + "="
  let decodedCookie
  if (typeof window === 'undefined') decodedCookie = decodeURIComponent(req.headers.cookie)
  else decodedCookie = decodeURIComponent(document.cookie)
  let ca = decodedCookie.split(';')
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i]
    while (c.charAt(0) == ' ') {
      c = c.substring(1)
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length)
    }
  }
  return ""
}
加载中...
豫ICP备16002920号-3