我有以下商店代码来处理登录,注销,获取用户以及将令牌设置为所有axios请求作为auth标头。
它适用于客户端渲染,比如我去登录页面,登录,获取令牌,将其存储在cookie中..但是当我刷新页面时,似乎没有任何令牌被设置了......我我在NuxtServerInit上调用fetch操作,仍然没有运气..我的代码失败的任何想法?
继承我的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)
}
}
}
答案 0 :(得分:2)
我通过实现一个拦截器解决了这个问题,该拦截器会将令牌注入到每个axios请求的头文件中。它看起来像这样:
export default ({ $axios, store }) => {
$axios.defaults.baseURL = 'https://api.com/api/'
if (process.server) {
return
}
$axios.interceptors.request.use(request => {
request.baseURL = 'https://api.com/api/'
// Get token from auth.js store
const token = store.state.token
// Update token axios header
if (token) {
request.headers.common['Authorization'] = token
}
return request
})
}
您将它用作nuxt插件。
答案 1 :(得分:1)
我也遇到了同样的问题。在上一个答案中,我在每个请求中都放置了标头,但是嵌套路由的第二页会使令牌消失。
const service = axios.create({
baseURL: 'http://127.0.0.1:9012',
timeout: 30000,
headers: {'Authorization': 'Bearer '+ getUser().token }
})