前言：在nuxtjs中對于axios二次封裝有很多方式狮杨，因為nuxtjs中的axios有2種方式可以操作者冤，分別是：@nuxtjs/axios和普通的axios淮蜈，所以本文寫的內(nèi)容是@nuxtjs/axios的內(nèi)容哺窄。
一般婆、在nuxt.config.js中的plugins引入axios文件
plugins: [
'~/plugins/axios'
],
二到腥、在項目根目錄新建plugins/axios.js
export default ( { $axios,store } )=>{
//Request攔截器，設置token
$axios.onRequest((config)=>{
console.log( 111 );
config.headers['Authorization'] = store.state.token;
})
//Error攔截器 : 出現(xiàn)錯誤的時候被調(diào)用
$axios.onRequest((error)=>{
console.log( 222 );
})
$axios.onResponse((response)=>{
console.log( 333);
return response.data;
})
}
三蔚袍、middleware/auth.js
export default ( {store,redirect} )=>{
store.commit('getToken');
if( !store.state.token ){
redirect('/login');
}
}
四乡范、store/index.js
export const state = {
token : '小鹿線:www.xuexiluxian.cn'
}
export const mutations = {
setToken( state , token ){
state.token = token;
this.$cookies.set('token',token);
},
getToken( state ){
state.token = this.$cookies.get('token');
}
}
