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

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

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) {

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)
               }

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',

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') {
+            const findLang = this.langList.find(lang => this.userList.lang === lang.value)
-              this.tableProfile[3].prop = '简体中文'
+            if (findLang) {
-            } else {
+              this.tableProfile[3].prop = findLang.name
-              this.tableProfile[3].prop = 'English'
             }
             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

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>

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) => {
+  const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
   if (to.path === '/login') { // 拦截登录页面，系统初始化检查
-    const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
     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))

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')