web前端开发

nuxtjs的axios二次封装

2022-02-21  本文已影响0人  终身成长人格

前言:在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');
    }
}
上一篇下一篇

猜你喜欢

热点阅读