我有以下商店代码来处理登录,注销,获取用户并将令牌设置为所有axios请求作为auth标头。
它与客户端渲染效果很好,比如说我进入登录页面,登录,获取令牌,将其存储在cookie中。。但是,当我刷新页面时,似乎不再设置令牌了。在NuxtServerInit上执行操作,仍然没有运气。任何有关我的代码失败的想法吗?
这是我的store / index.js文件:
https://jsfiddle.net/3dc07yv4/
import Cookie from 'cookie'
import Cookies from 'js-cookie'
export const state = () => ({
sidebar: true,
token: null,
user: null
})
export const mutations = {
// SET SIDEBAR
toggleSidebar (state) {
state.sidebar = !state.sidebar
},
// SET USER
setUser (state, user) {
state.user = user
},
// SET TOKEN
setToken (state, token) {
state.token = token
}
}
export const getters = {
loggedIn (state) {
return Boolean(state.user && state.token)
}
}
export const actions = {
async nuxtServerInit ({ dispatch }, { req }) {
await dispatch('fetch')
},
// Update token
async updateToken ({ commit }, token) {
// Update token in store's state
commit('setToken', token)
// Set Authorization token for all axios requests
console.log('Setting axios token to: ', token)
this.$axios.setToken(token, '')
// Update cookies
if (process.browser) {
// ...Browser
if (token) {
Cookies.set('ccmsToken', token, { expires: 1 })
} else {
Cookies.remove('ccmsToken')
}
} else {
// ...Server
let params = {
domain: '/'
}
if (!token) {
let expires
let date = new Date()
expires = date.setDate(date.getDate() + 1)
params.expires = new Date(expires)
}
this.app.context.res.setHeader('Set-Cookie', Cookie.serialize('ccmsToken', token, params))
}
},
// Fetch Token
async fetchToken ({ dispatch }) {
let token
// Try to extract token from cookies
if (!token) {
const cookieStr = process.browser ? document.cookie : this.app.context.req.headers.cookie
const cookies = Cookie.parse(cookieStr || '') || {}
token = cookies['ccmsToken']
}
if (token) {
await dispatch('updateToken', token)
}
},
// Reset
async reset ({ dispatch, commit }) {
commit('setUser', null)
await dispatch('updateToken', null)
},
// Fetch
async fetch ({ getters, state, commit, dispatch }, username = 'admin', { endpoint = 'http://localhost:8000/api/user' } = {}) {
// Fetch and update latest token
await dispatch('fetchToken')
// Skip if there is no token set
if (!state.token) {
return
}
// Try to get user profile
try {
const data = await this.$axios.$get(endpoint + '?username=' + username)
commit('setUser', data)
} catch (e) {
// Reset store
await dispatch('reset')
}
},
// Login
async login ({ dispatch }, { fields, endpoint = 'http://localhost:8000/api/login' } = {}) {
try {
// Send credentials to API
let data = await this.$axios.$post(endpoint, fields)
if (data.success) {
await dispatch('updateToken', data['token'])
// Fetch authenticated user
await dispatch('fetch', data.user.username)
} else {
throw new Error(data.message)
}
} catch (error) {
if (error.response && error.response.status === 401) {
throw new Error('Bad credentials')
}
throw error
}
},
// Logout
async logout ({ dispatch, state }) {
try {
await dispatch('reset')
} catch (e) {
console.error('Error while logging out', e)
}
}
}