参考文献:

https://github.com/hilongjw/vue-progressbar

main.js

import Vue from 'vue';
import router from './router'
import App from './App.vue';
import store from './store'
// 导入 table 和 分页组件
import { VTable, VPagination } from 'vue-easytable'

//vue-js-modal
import VModal from 'vue-js-modal'

//vuejs-dialog
import VuejsDialog from 'vuejs-dialog';
import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // only needed in custom components
import 'vuejs-dialog/dist/vuejs-dialog.min.css';

//vue-progressbar
import VueProgressBar from 'vue-progressbar'


// 注册到全局
Vue.component(VTable.name, VTable);
Vue.component(VPagination.name, VPagination);

//vue-js-modal
Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } });

//vuejs-dialog  Tell Vue to install the plugin.
Vue.use(VuejsDialog);
console.log(VuejsDialogMixin);

//vue-progressbar
const options = {
    //color: '#bffaf3',
    //failedColor: '#874b4b',
    thickness: '5px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'top',
    inverse: false
}
Vue.use(VueProgressBar, options);

Vue.config.productionTip = true;

Vue.filter('capitalize', function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
});


var app = new Vue({
    router: router,
    store,
    render: h => h(App)
}).$mount('#app');

export default app;

 App.vue

<template>
  <div id="app">
      <div v-if="hasAccess" id="nav"></div>
      <router-link to="/">Home</router-link> |
      <router-link to="/protected">Protected</router-link>
      <router-view/>
      <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'

    export default {
        name: 'App',
        computed: {
            ...mapGetters('oidcStore', [
                'oidcIsAuthenticated'
            ]),
            hasAccess: function() {
                return this.oidcIsAuthenticated || this.$route.meta.isPublic
            }
        },
        methods: {
            userLoaded: function(e) {
                console.log('I am listening to the user loaded event in vuex-oidc', e.detail)
            },
            oidcError: function(e) {
                console.log('I am listening to the oidc error event in vuex-oidc', e.detail)
            }
        },
        mounted() {
            window.addEventListener('vuexoidc:userLoaded', this.userLoaded)
            window.addEventListener('vuexoidc:oidcError', this.oidcError)
        },
        destroyed() {
            window.removeEventListener('vuexoidc:userLoaded', this.userLoaded)
            window.removeEventListener('vuexoidc:oidcError', this.oidcError)
        }

    }
</script>

<style>

</style>

axios.js

import Vue from 'vue';
import axios from 'axios';
import store from '../store';
import app from '../main'; // import the instance

Vue.prototype.$axios = axios
axios.defaults.baseURL = process.env.VUE_APP_API_BaseUrl;
axios.defaults.headers.common['Authorization'] = "Bearer " + store.state.oidcStore.access_token;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';

// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    config.headers.Authorization = "Bearer " + store.state.oidcStore.access_token;
    console.info(config);
    app.$Progress.start();
    return config;
}, function(error) {
    app.$Progress.fail();
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function(response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    app.$Progress.finish();
    return response;
}, function(error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    app.$Progress.fail();
    return Promise.reject(error);
});

export default axios

运行效果:

Logo

前往低代码交流专区

更多推荐