NEZ-1164 fix: 登录页支持国际化

2021-11-04 12:13:36 +08:00
parent 14dc417a8a
commit f87c8d4c53
8 changed files with 49 additions and 123 deletions
--- a/nezha-fronted/src/components/common/i18n.js
+++ b/nezha-fronted/src/components/common/i18n.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
+import { get } from '@/http'
 // import messages from './language'
 Vue.use(VueI18n)
 // 从localStorage获取语言选择。
@@ -15,14 +16,6 @@ export function loadI18n (i18nData) {
    Object.keys(i18nData).forEach(lang => {
      i18n.setLocaleMessage(lang, i18nData[lang])
    })
-  } else {
-    i18nData = localStorage.getItem('nz-i18n-data')
-    if (i18nData) {
-      i18nData = JSON.parse(i18nData)
-      Object.keys(i18nData).forEach(lang => {
-        i18n.setLocaleMessage(lang, i18nData[lang])
-      })
-    }
  }
 }
 export default i18n
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -112,6 +112,8 @@
 import { mapActions } from 'vuex'
 import QRCode from 'qrcodejs2'
 import bus from '@/libs/bus.js'
+import { get } from '@/http'
+import { loadI18n } from '@/components/common/i18n'
 export default {
  name: 'login',
  data () {
@@ -149,7 +151,6 @@ export default {
      if (this.loading || !this.license.valid) {
        return
      }
-      // if (this.license.valid && this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
      if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
        this.loading = true
        this.$post('/sys/login', this.loginData).then(res => {
@@ -158,6 +159,14 @@ export default {
            this.authToken = res.data.authToken
            this.lang = res.data.user.lang
            this.$i18n.locale = this.lang
+            // 获取可选语言
+            get('/sys/dict/all?type=lang').then(response => {
+              if (response.code === 200) {
+                const langList = response.data.map(lang => ({ name: lang.name, value: lang.value }))
+                this.$store.commit('setLangList', langList)
+                localStorage.setItem('nz-language-list', JSON.stringify(langList))
+              }
+            })
            sessionStorage.setItem('nz-token', res.data.authToken)
            if (res.data.authFlag === 1) {
              if (res.data.authBind === 0) {
--- a/nezha-fronted/src/components/common/rightBox/profileBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/profileBox.vue
@@ -122,7 +122,13 @@ export default {
              if (res.code === 200) {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
-                this.$emit('clickProfile')
+                if (this.editProfile.lang !== localStorage.getItem('nz-language')) {
+                  localStorage.setItem('nz-language', this.editProfile.lang)
+                  this.$i18n.locale = this.editProfile.lang
+                  this.$emit('clickProfile', true)
+                } else {
+                  this.$emit('clickProfile', false)
+                }
              } else {
                this.$message.error(res.msg)
              }
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -41,12 +41,6 @@
          <el-dropdown-item v-for="lang in langList" :key="lang.value">
            <div :style="language === lang.value ? 'color:#f90' : ''" @click="changeLocal(lang.value)"><i :class="`nz-icon-lang-${lang.value}`" class="nz-icon"></i>{{lang.name}}</div>
          </el-dropdown-item>
-<!--          <el-dropdown-item>
-            <div id="header-to-english" :style="language === 'en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
-          </el-dropdown-item>
-          <el-dropdown-item>
-            <div id="header-to-chinese" :style="language === 'cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>简体中文</div>
-          </el-dropdown-item>-->
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click">
@@ -65,7 +59,6 @@
        </el-dropdown-menu>
      </el-dropdown>
    </div>
-<!--    <change-password :cur-user="username" :show-dialog="showChangePin" @click="showPinDialog" @dialogClosed="dialogClosed"></change-password>-->
    <guide :show-dialog="showGuide" @dialogClosed="dialogClosed" @close="showGuide = false"></guide>
  </div>
 </template>
@@ -73,12 +66,10 @@
 <script>
 import bus from '../../libs/bus'
 import { mapActions } from 'vuex'
-// import changePin from '../page/config/changePin'
 import guide from '@/components/common/popBox/guide'
 export default {
  name: 'Header',
  components: {
-    // 'change-password': changePin,
    guide
  },
  data () {
@@ -143,7 +134,6 @@ export default {
    getLinkData () {
      this.$get('link').then(response => {
        this.$store.commit('setLinkData', response.data.list)
-        // this.linkData = response.data.list
      })
    },
    changeLocal (lang) {
@@ -159,13 +149,6 @@ export default {
        document.location.href = '/'
      })
    },
-    // refreshLang () {
-    //   this.language = localStorage.getItem('nz-language')
-    //   this.$i18n.locale = this.language
-    //   this.$nextTick(() => {
-    //     // window.location.reload()
-    //   })
-    // },
    showPinDialog () {
      this.$router.push({
        path: '/profile',
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -226,6 +226,11 @@ export default {
  mounted () {
    this.personalCenter()
  },
+  computed: {
+    langList () {
+      return this.$store.getters.getLangList
+    }
+  },
  methods: {
    // 请求后端数据
    personalCenter () {
@@ -241,10 +246,9 @@ export default {
            }
            this.tableProfile[1].prop = this.userList.email
            this.tableProfile[2].prop = this.userList.mobile
-            if (this.userList.lang == 'cn') {
-              this.tableProfile[3].prop = '简体中文'
-            } else {
-              this.tableProfile[3].prop = 'English'
+            const findLang = this.langList.find(lang => this.userList.lang === lang.value)
+            if (findLang) {
+              this.tableProfile[3].prop = findLang.name
            }
            this.tableProfile[4].prop = this.userList.source
            const name = this.userList.name.substr(0, 1)
@@ -316,8 +320,13 @@ export default {
    closeRightBox () {
      this.rightBox.show = false
    },
-    clickProfile () {
+    clickProfile (refresh) {
      this.personalCenter()
+      if (refresh) {
+        setTimeout(() => {
+          window.location.reload()
+        }, 500)
+      }
    },
    closeDialog () {
      this.authBindShow = false
--- a/nezha-fronted/src/components/page/config/util.vue
+++ b/nezha-fronted/src/components/page/config/util.vue
@@ -1,60 +0,0 @@
-
-<script>
-import en from '../../common/language/en'
-import cn from '../../common/language/cn'
-export default {
-  name: 'language',
-  data () {
-    return {
-      result: null,
-      languageList: []
-    }
-  },
-  methods: {
-    compareFile: function (obj, compareObj) {
-      if (!obj) {
-        obj = en
-      }
-      if (!compareObj) {
-        compareObj = cn
-      }
-      const keys = Object.keys(obj)
-      for (const key of keys) {
-        if (typeof obj[key] === 'object') {
-          if (!compareObj[key]) {
-            this.$set(compareObj, key, {})
-          }
-          this.compareFile(obj[key], compareObj[key])
-        } else {
-          if (!compareObj[key]) {
-            this.$set(compareObj, key, obj[key])
-          }
-        }
-      }
-      this.result = cn
-    },
-    listLanguage: function (obj, compareObj) {
-      if (!obj) {
-        obj = en
-      }
-      if (!compareObj) {
-        compareObj = cn
-      }
-      const keys = Object.keys(obj)
-      for (const key of keys) {
-        if (typeof obj[key] === 'object') {
-          if (!compareObj[key]) {
-            this.$set(compareObj, key, {})
-          }
-          this.listLanguage(obj[key], compareObj[key])
-        } else {
-          if (!compareObj[key]) {
-            this.$set(compareObj, key, obj[key])
-          }
-          this.languageList.push({ en: obj[key], cn: compareObj[key] })
-        }
-      }
-    }
-  }
-}
-</script>
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -12,8 +12,8 @@ const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state'] /
 const permissionWhiteList = ['/profile', '/menu', ...loginWhiteList] // 权限白名单

 router.beforeEach((to, from, next) => {
-  if (to.path === '/login') { // 拦截登录页面，系统初始化检查
  const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
+  if (to.path === '/login') { // 拦截登录页面，系统初始化检查
    Vue.http.get(configUrl).then(config => {
      get(config.body.baseUrl + 'setup/inited').then(res => {
        if (res.code === 200) {
@@ -24,20 +24,33 @@ router.beforeEach((to, from, next) => {
          }
        }
      })
+      if (!store.getters.i18nIsReady) {
+        get(config.body.baseUrl + 'sys/i18n/lang').then(res => {
+          if (res.code === 200) {
+            loadI18n(res.data)
+            store.commit('i18nReady', true)
+          }
+        })
+      }
    })
  } else if (sessionStorage.getItem('nz-token')) {
    // 从localStorage加载i18n
    if (!store.getters.i18nIsReady) {
-      loadI18n()
+      Vue.http.get(configUrl).then(config => {
+        get(config.body.baseUrl + 'sys/i18n/lang').then(response => {
+          if (response.code === 200) {
+            loadI18n(response.data)
+            store.commit('i18nReady', true)
+          }
+        })
+      })
      const langList = localStorage.getItem('nz-language-list')
      if (langList) {
        store.commit('setLangList', JSON.parse(langList))
      }
-      store.commit('i18nReady', true)
    }
    new Promise(resolve => {
      if (store.getters.menuList.length === 0) {
-        const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
        Vue.http.get(configUrl).then(config => {
          post(config.body.baseUrl + 'sys/user/permissions', { token: sessionStorage.getItem('nz-token') }).then(res => {
            store.commit('setMenuList', sortByOrderNum(res.data.menus))
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -3,7 +3,6 @@ import router from '../router'
 import bus from '../libs/bus'
 import { sortByOrderNum } from '@/permission'
 import moment from 'moment-timezone'
-import i18n, { loadI18n } from '@/components/common/i18n'

 const user = {
  state: {
@@ -75,32 +74,6 @@ const user = {
          localStorage.setItem('nz-user-name', userList.name)
        }
      })
-      // 获取用户语言，存进localStorage
-      localStorage.setItem('nz-language', res.data.user.lang || 'en')
-      // 获取国际化内容
-      const getI18nData = new Promise(resolve => get('/sys/i18n/lang').then(response => {
-        if (response.code === 200) {
-          const i18nData = response.data
-          localStorage.setItem('nz-i18n-data', JSON.stringify(i18nData))
-          resolve(i18nData)
-        } else {
-          resolve()
-        }
-      }))
-      // 获取可选语言
-      const getLangList = new Promise(resolve => get('/sys/dict/all?type=lang').then(response => {
-        if (response.code === 200) {
-          const langList = response.data.map(lang => ({ name: lang.name, value: lang.value }))
-          store.commit('setLangList', langList)
-          localStorage.setItem('nz-language-list', JSON.stringify(langList))
-        }
-        resolve()
-      }))
-      Promise.all([getI18nData, getLangList]).then(response => {
-        console.info(response)
-        response[0] && loadI18n(response[0])
-        store.commit('i18nReady', true)
-      })
    },
    logoutSuccess (store, res) {
      sessionStorage.removeItem('nz-username')