smsb-web-develop/src/main.js

import Keycloak from 'keycloak-js'
import Vue from 'vue'

import 'element-ui/lib/theme-chalk/index.css'
import './scss/index.scss'

import Element, {
  MessageBox,
  InputNumber
} from 'element-ui'

import App from './App'
import store from './store'
import router from './router'

import './icons'
import './components'
import './permission'

import {
  showLoading,
  closeLoading
} from '@/utils/pop'

const initOptions = {
  url: process.env.VUE_APP_KEYCLOAK_OPTIONS_URL,
  realm: process.env.VUE_APP_KEYCLOAK_OPTIONS_REALM,
  clientId: process.env.VUE_APP_KEYCLOAK_OPTIONS_CLIENTID,
  onLoad: process.env.VUE_APP_KEYCLOAK_OPTIONS_ONLOAD
}

const keycloak = Keycloak(initOptions)

keycloak
  .init({ onLoad: initOptions.onLoad })
  .then(auth => {
    if (!auth) {
      console.error('Authenticated Failed[403]')
      return
    }

    console.log(keycloak)

    refreshKeycloak()
  })
  .catch(e => console.error('Authenticated Failed', e))
  .finally(startApp)

function refreshKeycloak () {
  // Token Refresh
  setInterval(() => {
    keycloak.updateToken(70).then(refreshed => {
      if (refreshed) {
        store.dispatch('user/refresh', keycloak).catch(() => {
          try {
            MessageBox.close()
          } finally {
            store.dispatch('user/clearToken')
            MessageBox.confirm(
              '账号信息发生变化，请重新登录',
              '系统提示',
              {
                type: 'warning',
                confirmButtonText: '重新登录',
                center: true,
                showClose: false,
                showCancelButton: false,
                closeOnClickModal: false,
                closeOnPressEscape: false,
                closeOnHashChange: false
              }
            ).then(() => {
              store.dispatch('user/logout')
            })
          }
        })
      } else {
        console.warn(`Token not refreshed, valid for ${Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000)} seconds`)
      }
    }).catch(e => console.error('Failed to refresh token', e))
  }, 6000)
}

async function startApp () {
  document.body.setAttribute('version', __VERSION__)

  InputNumber.methods.handleInputChange = function (value) {
    const newVal = value === '' ? this.min === -Infinity ? void 0 : this.min : Number(value)
    if (!isNaN(newVal) || value === '') {
      this.setCurrentValue(newVal)
    }
    this.userInput = null
  }
  Vue.use(Element)

  Vue.config.productionTip = false
  Vue.config.errorHandler = err => {
    closeLoading()
    throw (err || 'custom reject')
  }

  Vue.prototype.__PLACEHOLDER__ = __PLACEHOLDER__
  Vue.prototype.__WECHAT__ = __WECHAT__

  Vue.prototype.$keycloak = keycloak
  Vue.prototype.$showLoading = showLoading
  Vue.prototype.$closeLoading = closeLoading
  Vue.prototype.$designProgram = function (id) {
    window.open(this.$router.resolve({
      name: 'program',
      params: { id }
    }).href, '_blank')
  }

  window._AMapSecurityConfig = {
    securityJsCode: process.env.VUE_APP_GAODE_MAP_JSCODE
  }

  await store.dispatch('user/login', keycloak)
  store.dispatch('permission/generateRoutes')
  router.addRoutes(store.getters.permissionRoutes)

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