fix: route filtering when single role

src/constant.js

@@ -8,7 +8,7 @@ export const Role = {
   ADMIN: 'ROLE_ADMIN',
   SUPERVISOR: 'ROLE_OPERATION_SUPERVISOR',
   STAFF: 'ROLE_OPERATION_STAFF',
-  VISITOR: 'ROLE_VISITOR'
+  VISITOR: '__ROLE_VISITOR__'
 }
 
 export const State = {

src/main.js

@@ -13,7 +13,10 @@ import router from './router'
 import './icons'
 import './permission'
 
-import { Access } from './constant'
+import {
+  Role,
+  Access
+} from './constant'
 
 import Wrapper from './components/Wrapper'
 import Permission from './components/Permission'
@@ -61,7 +64,7 @@ function startApp () {
   store.dispatch('permission/generateRoutes', store.getters.roles)
   router.addRoutes(store.getters.permissionRoutes)
 
-  Vue.prototype.hasEditPermission = store.getters.roles.size > 1
+  Vue.prototype.hasEditPermission = !store.getters.roles.has(Role.VISITOR)
 
   new Vue({
     router,

src/router/index.js

@@ -13,7 +13,7 @@ Vue.use(Router)
  * name:'router-name'              the name is used by <keep-alive> (must set!!!)
  * meta : {
  *   include: ['admin'],           control the page roles (you can set multiple roles)
- *   exclude: ['editor'],          control the page roles (you can set multiple roles)
+ *   exclude: ['visitor'],          control the page roles (you can set multiple roles)
  *   title: 'title',               the name show in sidebar and breadcrumb (recommend set)
  *   icon: 'svg-name'/'el-icon-x', the icon show in the sidebar
  *   activeMenu: '/example/list'   if set path, the sidebar will highlight the path you set
@@ -198,7 +198,6 @@ export const asyncRoutes = [
   {
     path: '/l',
     component: Layout,
-    exclude: [Role.STAFF],
     meta: { icon: 'el-icon-edit-outline' },
     children: [
       {

src/store/modules/user.js

@@ -37,7 +37,8 @@ function parseRealmAccess (realmAccess) {
         roleSet.add(role)
       }
     })
-  } else {
+  }
+  if (!roleSet.size) {
     roleSet.add(Role.VISITOR)
   }
   return roleSet
@@ -67,14 +68,16 @@ const actions = {
     }
   },
 
-  logout ({ commit }) {
-    return new Promise(resolve => {
-      // 登出将跳转页面，所以不需其他操作
-      Vue.prototype.$keycloak.logout()
-      commit('SET_TOKEN', '')
-      resetRouter()
-      resolve()
-    })
+  logout ({ dispatch }) {
+    // 登出将跳转页面，所以不需其他操作
+    Vue.prototype.$keycloak.logout()
+    dispatch('clearToken')
+  },
+
+  clearToken ({ commit }) {
+    commit('SET_TOKEN', '')
+    Vue.prototype.$keycloak.refreshToken = null
+    resetRouter()
   }
 }
 

src/utils/request.js

@@ -78,6 +78,7 @@ service.interceptors.response.use(
     if (response) {
       const { status } = response
       if (status === 401) {
+        store.dispatch('user/clearToekn')
         // to re-login
         MessageBox.confirm(
           '登录状态已过期，请重新登录',
@@ -91,9 +92,7 @@ service.interceptors.response.use(
             closeOnClickModal: false
           }
         ).then(() => {
-          store.dispatch('user/logout').then(() => {
-            location.reload()
-          })
+          store.dispatch('user/logout')
         })
       } else if (!config?.custom) {
         if (status === 403) {