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 from 'element-ui'

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

import './icons' // icon
import './permission' // permission control

import Permission from './components/Permission'
import StatusWrapper from './components/StatusWrapper'
import Pagination from './components/Pagination'
import CTable from './components/CTable'
import EditInput from './components/EditInput'
import SearchInput from './components/SearchInput'

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

async function startApp () {
  console.log(keycloak)

  Vue.use(Element)

  Vue.component('Permission', Permission)
  Vue.component('StatusWrapper', StatusWrapper)
  Vue.component('Pagination', Pagination)
  Vue.component('CTable', CTable)
  Vue.component('EditInput', EditInput)
  Vue.component('SearchInput', SearchInput)

  Vue.prototype.$showLoading = showLoading
  Vue.prototype.$closeLoading = closeLoading

  Vue.config.productionTip = false
  Vue.config.errorHandler = (err, vm, info) => {
    closeLoading()
    throw err
  }

  Vue.prototype.$keycloak = keycloak

  await store.dispatch('user/login', keycloak.token)

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

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
    }

    // Token Refresh
    setInterval(() => {
      keycloak.updateToken(70).then(refreshed => {
        if (refreshed) {
          console.info('Token refreshed')
          store.dispatch('user/login', keycloak.token)
        } else {
          console.warn(`Token not refreshed, valid for ${Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000)} seconds`)
        }
      }).catch(() => {
        console.error('Failed to refresh token')
      })
    }, 6000)
  })
  .catch(() => {
    console.error('Authenticated Failed')
  })
  .finally(startApp)