perf: optimize the logic for determining whether to initialize (#495)

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/router/guard/permissionGuard.js

@@ -2,7 +2,6 @@ import router from '@/router'
 import store from '@/store'
 import NProgress from 'nprogress'
 import { domTitle, setDocumentTitle } from '@/utils/domUtil'
-import apiClient from '@/utils/api-client'
 
 NProgress.configure({ showSpinner: false, speed: 500 })
 
@@ -11,35 +10,50 @@ const whiteList = ['Login', 'Install', 'NotFound', 'ResetPassword'] // no redire
 let progressTimer = null
 router.beforeEach(async (to, from, next) => {
   onProgressTimerDone()
+
   progressTimer = setTimeout(() => {
     NProgress.start()
   }, 250)
+
+  // set title meta
   to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`)
+
+  // check installation status
+  if (store.getters.isInstalled === undefined) {
+    await store.dispatch('fetchIsInstalled')
+  }
+
+  if (!store.getters.isInstalled && to.name !== 'Install') {
+    next({
+      name: 'Install'
+    })
+    onProgressTimerDone()
+    return
+  }
+
+  if (store.getters.isInstalled && to.name === 'Install') {
+    next({
+      name: 'Login'
+    })
+    onProgressTimerDone()
+    return
+  }
+
   if (store.getters.token) {
-    if (to.name === 'Install') {
-      next()
-      return
-    }
-    const response = await apiClient.isInstalled()
-    if (!response.data) {
-      next({
-        name: 'Install'
-      })
-      onProgressTimerDone()
-      return
+    if (!store.getters.options) {
+      await store.dispatch('refreshOptionsCache').then()
     }
-    if (to.name === 'Login') {
+
+    if (['Login', 'Install'].includes(to.name)) {
       next({
         name: 'Dashboard'
       })
       onProgressTimerDone()
       return
     }
 
-    if (!store.getters.options) {
-      store.dispatch('refreshOptionsCache').then()
-    }
     next()
+    onProgressTimerDone()
     return
   }
 
@@ -48,6 +62,7 @@ router.beforeEach(async (to, from, next) => {
     next()
     return
   }
+
   next({
     name: 'Login',
     query: {

src/store/getters.js

@@ -5,6 +5,7 @@ const getters = {
   layoutSetting: state => state.app.layoutSetting,
   sidebar: state => state.app.sidebar,
   loginModal: state => state.app.loginModal,
+  isInstalled: state => state.app.isInstalled,
   token: state => state.user.token,
   user: state => state.user.user,
   options: state => state.option.options

src/store/modules/app.js

@@ -10,6 +10,7 @@ import {
   LAYOUT_SETTING,
   SIDEBAR_TYPE
 } from '@/store/mutation-types'
+import apiClient from '@/utils/api-client'
 
 const app = {
   state: {
@@ -23,7 +24,8 @@ const app = {
     autoHideHeader: false,
     color: null,
     layoutSetting: false,
-    loginModal: false
+    loginModal: false,
+    isInstalled: undefined
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -67,9 +69,25 @@ const app = {
     },
     TOGGLE_LOGIN_MODAL: (state, show) => {
       state.loginModal = show
+    },
+    SET_IS_INSTALLED: (state, isInstalled) => {
+      state.isInstalled = isInstalled
     }
   },
   actions: {
+    fetchIsInstalled({ commit }) {
+      return new Promise((resolve, reject) => {
+        apiClient
+          .isInstalled()
+          .then(response => {
+            commit('SET_IS_INSTALLED', response.data)
+            resolve(response)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
     setSidebar({ commit }, type) {
       commit('SET_SIDEBAR_TYPE', type)
     },

src/store/modules/option.js

@@ -18,7 +18,7 @@ const keys = [
 ]
 const option = {
   state: {
-    options: []
+    options: undefined
   },
   mutations: {
     SET_OPTIONS: (state, options) => {

src/views/system/Installation.vue

@@ -14,8 +14,8 @@
           <!-- Blogger info -->
           <div class="mt-5 mb-5">
             <a-radio-group v-model="installationMode">
-              <a-radio-button value="new"> 全新安装 </a-radio-button>
-              <a-radio-button value="import"> 数据导入 </a-radio-button>
+              <a-radio-button value="new"> 全新安装</a-radio-button>
+              <a-radio-button value="import"> 数据导入</a-radio-button>
             </a-radio-group>
           </div>
           <a-form-model
@@ -26,7 +26,7 @@
             class="installationForm animated fadeIn"
             layout="horizontal"
           >
-            <a-divider dashed orientation="left"> 管理员信息 </a-divider>
+            <a-divider dashed orientation="left"> 管理员信息</a-divider>
             <a-form-model-item prop="username">
               <a-input v-model="form.model.username" placeholder="用户名">
                 <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="user" />
@@ -52,7 +52,7 @@
                 <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="lock" />
               </a-input>
             </a-form-model-item>
-            <a-divider dashed orientation="left"> 站点信息 </a-divider>
+            <a-divider dashed orientation="left"> 站点信息</a-divider>
             <a-form-model-item prop="url">
               <a-input v-model="form.model.url" placeholder="博客地址">
                 <a-icon slot="prefix" style="color: rgba(0, 0, 0, 0.25)" type="link" />
@@ -169,7 +169,6 @@ export default {
     }
   },
   beforeMount() {
-    this.handleVerifyIsInstall()
     this.$set(this.form.model, 'url', window.location.protocol + '//' + window.location.host)
   },
   computed: {
@@ -181,13 +180,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['installCleanToken']),
-    async handleVerifyIsInstall() {
-      const response = await apiClient.isInstalled()
-      if (response.data) {
-        await this.$router.push({ name: 'Login' })
-      }
-    },
+    ...mapActions(['installCleanToken', 'fetchIsInstalled']),
     handleInstall() {
       this.$refs.installationForm.validate(valid => {
         if (valid) {
@@ -203,6 +196,7 @@ export default {
               setTimeout(() => {
                 this.form.installing = false
               }, 400)
+              this.fetchIsInstalled()
             })
         }
       })
@@ -241,6 +235,7 @@ export default {
           setTimeout(() => {
             this.form.importing = false
           }, 400)
+          this.fetchIsInstalled()
         })
     },
     handleImportCallback() {

src/views/user/Login.vue

@@ -16,7 +16,6 @@
 import { mapActions } from 'vuex'
 
 import LoginForm from '@/components/Login/LoginForm'
-import apiClient from '@/utils/api-client'
 
 export default {
   components: {
@@ -28,7 +27,6 @@ export default {
     }
   },
   beforeMount() {
-    this.handleVerifyIsInstall()
     document.addEventListener('keydown', this.onRegisterResetPasswordKeydown)
   },
   beforeDestroy() {
@@ -44,12 +42,6 @@ export default {
         this.resetPasswordButtonVisible = !this.resetPasswordButtonVisible
       }
     },
-    async handleVerifyIsInstall() {
-      const response = await apiClient.isInstalled()
-      if (!response.data) {
-        await this.$router.push({ name: 'Install' })
-      }
-    },
     onLoginSucceed() {
       // Refresh the user info
       this.refreshUserCache()