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'
})
}
})
}