Nuxt 使用技巧

Nuxt store vuex 登录刷新页面token 数据不见了

store/user.js

import { AUTHUSERKEY, TOKENKEY, ISLOGINKEY } from '~/config/constant'
import { Message } from 'element-ui'


export const state = () => {
  return {
    authUser: null,
    token: null,
    isLogin: false,
    homeId: 0
  }
}

export const mutations = {
  SET_USER(state, user) {
    state.authUser = user
    this.$cookies.set(AUTHUSERKEY, JSON.stringify(state.authUser))
  },
  SET_TOKEN(state, token) {
    state.token = token
    this.$cookies.set(TOKENKEY, state.token)

  },

  SET_ISLOGIN(state, isLogin = false) {
    state.isLogin = isLogin
    this.$cookies.set(ISLOGINKEY, state.isLogin)
  },
  saveHomeId(state, id) {
    if (process.client) {
      state.homeId = id
      sessionStorage.setItem('homeId', id)
      console.log(1233)
    }
  }

}

export const getters = {
  getUser(state) {
    return state.authUser
  },
  getToken(state) {
    return state.token
  },
  getIsLogin(state) {
    return state.isLogin
  }

}

export const actions = {

  async login({ commit }, { username, password }) {
    try {
      const { token } = await this.$axios.post('/login', { username, password })
      if (token) {
        commit('SET_TOKEN', token)
        const { user } = await this.$axios.get('/getInfo')
        if (user) {
          commit('SET_USER', user)
          commit('SET_ISLOGIN', true)
        }
      }
    } catch (error) {
      if (error.response && error.response.status === 401) {
        throw new Error('Bad credentials')
      }
      throw error
    }
  },

  async logout({ commit }) {
    await this.$cookies.remove(AUTHUSERKEY)
    await this.$cookies.remove(TOKENKEY)
    await this.$cookies.remove(ISLOGINKEY)
  }

}

解决 办法

注意 nuxtServerInit 必须放在store/index.js 放在其他文件里面是不起作用的。 服务端获取道数据后，再转发给 客户端 store

import Cookie from "cookie";

export const actions = {
  nuxtServerInit({commit,}, {req, redirect}) {
    if (req.headers.cookie) {
      let {AUTHUSERKEY, TOKENKEY, ISLOGINKEY} = Cookie.parse(req.headers.cookie)
      AUTHUSERKEY = AUTHUSERKEY && JSON.parse(AUTHUSERKEY)
      ISLOGINKEY = ISLOGINKEY && JSON.parse(ISLOGINKEY)
      commit('user/SET_USER', AUTHUSERKEY)
      commit('user/SET_TOKEN', TOKENKEY)
      commit('user/SET_ISLOGIN', ISLOGINKEY)
    } else {
      redirect('/login')
    }
  }
}

axios 请求拦截 封装

import { Message } from 'element-ui'

export default ({ env, app, $axios, store, redirect }, inject) => {

  $axios.defaults.baseURL = env.baseUrl
  $axios.defaults.timeout = 5000

  // 请求拦截
  $axios.onRequest((config) => {
    const token = store.state.user.token
    if (token) config.headers.Authorization = `Bearer ${token}`
  })

  // 服务器返回异常拦截
  $axios.onError((error) => {
    const code = Number(error.response && error.response.status)
    console.log(error)
  })

  // 接口数据返回拦截
  $axios.onResponse((response) => {

    const res = response.data

    if (res.code == 200) {
      return res
    }
    if (res.code == 401) {

      store.dispatch('user/logout')

      if (process.client) {
        Message({
          message: res.msg || '服务器错误' + res.code,
          type: 'error'
        })
      }
      redirect('/login')

      return Promise.reject(new Error(res.msg || 'Error'))
    }
    if (res.code == 500) {
      Message({
        message: res.msg || '服务器错误' + res.code,
        type: 'error'
      })
      return Promise.reject(new Error(res.msg || 'Error'))
    }

    if (res.code == 404) {
      Message({
        message: res.msg || '未找到页面' + res.code,
        type: 'error'
      })
    }

  })
}