1
2

    "keycloak-js": "^22.0.1",
    "vuejs-logger": "^1.5.5",

1
2
3
4

VUE_APP_KEYCLOAK_OPTIONS_URL = 'http://keycloak.domain.net/auth'
VUE_APP_KEYCLOAK_OPTIONS_REALM = 'realm'
VUE_APP_KEYCLOAK_OPTIONS_CLIENTID = 'client-demo'
VUE_APP_KEYCLOAK_OPTIONS_ONLOAD = 'login-required'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

 <script>
-import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
+import { mapGetters } from 'vuex'
 // import ErrorLog from '@/components/ErrorLog'
 // import Screenfull from '@/components/Screenfull'
 // import SizeSelect from '@/components/SizeSelect'
 
 ...
     },
     async logout() {
       await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      this.$router.push(`/?redirect=${this.$route.fullPath}`)
     }
   }
 }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

-import { getToken } from '@/utils/auth' // get token from cookie
+// get token from cookie
+import { getToken } from '@/utils/auth'
 import getPageTitle from '@/utils/get-page-title'
 import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // progress bar style
+import Keycloak from 'keycloak-js'
+// progress bar
+import NProgress from 'nprogress'
+// progress bar style
+import 'nprogress/nprogress.css'
 import router from './router'
 import store from './store'
...

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
 
+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 = new Keycloak(initOptions)
+
 router.beforeEach(async(to, from, next) => {
   // start progress bar
   NProgress.start()
           // remove token and go to login page to re-login
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
+          // next(`/login?redirect=${to.path}`)
+          next(`/?redirect=${to.path}`)
           NProgress.done()
         }
       }
       next()
     } else {
       // other pages that do not have permission to access are redirected to the login page.
-      next(`/login?redirect=${to.path}`)
-      NProgress.done()
+      keycloak.init({ onLoad: initOptions.onLoad, checkLoginIframe: false }).then(async authenticated => {
+        if (!authenticated) {
+          console.log('not auth')
+          window.location.reload()
+          return
+        } else {
+          // await store.dispatch('user/keycloakLogin', keycloak.idToken)
+          await store.dispatch('user/keycloakLogin', keycloak)
+          next(`/?redirect=${to.path}`)
+          NProgress.done()
+        }
+      }).catch(error => {
+        console.log('Authenticated Failed', error)
+      })
+      // next(`/login?redirect=${to.path}`)
+      // NProgress.done()
     }
   }
 })

1
2
3
4
5
6
7
8

   department: state => state.user.department,
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
-  errorLogs: state => state.errorLog.logs
+  errorLogs: state => state.errorLog.logs,
+  keycloak: state => state.user.keycloak
 }
 export default getters

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

   nickname: '',
   introduction: '',
   department: '',
-  roles: []
+  roles: [],
+  keycloak: null
 }
 
 const mutations = {
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
+  },
+  SET_KEYCLOAK: (state, keycloak) => {
+    state.keycloak = keycloak
   }
 }
 ... 
       })
     })
   },
+  // keycloak login
+  keycloakLogin({ commit }, keycloak) {
+    return new Promise((resolve, reject) => {
+      login({ token: keycloak.idToken.trim() }).then(response => {
+        const data = response.data
+        const { token } = data
+        // const userinfo = jwtDecode(token)
+        // const { username, roles } = userinfo
+        commit('SET_TOKEN', token)
+        setToken(token)
+        commit('SET_KEYCLOAK', keycloak)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
 
   // get user info
   getInfo({ commit, state }) {
         commit('SET_ROLES', [])
         removeToken()
         resetRouter()
+        state.keycloak.logout()
 
         // reset visited views and cached views
         // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485