前言:在nuxtjs中对于axios二次封装有很多方式,因为nuxtjs中的axios有2种方式可以操作,分别是:@nuxtjs/axios和普通的axios,所以本文写的内容是@nuxtjs/axios的内容。
一、在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拦截器 : 出现错误的时候被调用
$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');
}
}