状态持久化与token校验

状态持久化与token校验
安装：cookie-universal-nuxt
思想：登录时：同步vuex与cookie,强制刷新后，unxtServerInit钩子函数取出cookie同步vuex，axios拦截器读取vuex (vuex是存在内存上，读取速度会比存在磁盘上快)

nuxt.config.js

modules: [
    '@nuxtjs/axios',
    'cookie-universal-nuxt' // 加入cookie模块  vue实例是就有$cookies
  ]

登录页

 <button @click="login">登录</button>
login() {
      this.$axios({
        url: '/data/user.json'
      })
      .then((res) => {
        if(res.status === 200) {
          console.log(this.$cookies)
          let token = res.data.token
          this.$cookies.set('token', token) // 存在cookies下
          this.setToken(token)
        }
        console.log(res)
      })
    }

store ==> index.js

export const actions = {
  // 这里 app vue 实例
  nuxtServerInit(store, { app: { $cookies } }) {
    //刷新时 获取cookies 里的token 设置到vuex
    let user = $cookies.get('token') || { err: 2, msg: '未登录', token: '' };
    console.log('nuxt初始化',user)
    store.dispatch('user/setToken', user)
    // console.log('nuxt初始化', $cookies)
  },
  setNbool({commit}, bool) {
    commit('SET_NBOOL', bool)
  }
}

axios

export default function ({ $axios, redircet, route, store }){
  // 基本配置信息
  $axios.defaults.timeout = 10000;
  // 请求拦截
  $axios.onRequest(config => {
    console.log('请求拦截')
    // 从vuex获取token
    config.headers.token = store.state.user.token
    return config
  })

  // 响应拦截
  $axios.onResponse(res => {
    console.log('响应拦截')
    return res
  })
  // 错误处理
  $axios.onError(error => {

    return error;
  })
}