From 6114c3d6c5432e528d5879a938a8672172dbcfda Mon Sep 17 00:00:00 2001
From: lbw <wangiegie@163.com>
Date: Tue, 14 Feb 2023 13:03:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=85=8D=E7=BD=AE=E9=A1=B9=E6=8A=BD?=
 =?UTF-8?q?=E5=8F=96=E8=87=B3ENV=20=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E4=B8=AD=E7=BB=B4=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                   | 20 +++++-
 src/api/login/index.ts                 | 13 ++--
 src/layout/navBars/breadcrumb/user.vue | 99 +++++++++++++-------------
 src/stores/themeConfig.ts              |  6 +-
 src/stores/userInfo.ts                 |  8 +--
 src/types/pinia.d.ts                   |  2 -
 src/views/login/index.vue              | 41 ++++++-----
 7 files changed, 101 insertions(+), 88 deletions(-)

diff --git a/.env b/.env
index 301d2415..9af53db1 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,14 @@
-# port 端口号
-VITE_PORT = 8888
+# 前端加密密钥
+VITE_PWD_ENC_KEY='pigxpigxpigxpigx'
+
+# OAUTH2 密码模式客户端信息
+VITE_OAUTH2_PASSWORD_CLIENT='pig:pig'
+
+# OAUTH2 短信客户端信息
+VITE_OAUTH2_MOBILE_CLIENT='app:app'
+
+# OAUTH2 社交登录客户端信息
+VITE_OAUTH2_SOCIAL_CLIENT='social:social'
 
 # ADMIN 服务地址
 VITE_ADMIN_PROXY_PATH = http://localhost:9999
@@ -7,5 +16,12 @@ VITE_ADMIN_PROXY_PATH = http://localhost:9999
 # 代码生成服务地址
 VITE_GEN_PROXY_PATH = http://localhost:5003
 
+# 是否开启websocket 消息接受,
+VITE_WEBSOCKET_ENABLE = false
+
+# 是否开启注册
+VITE_REGISTER_ENABLE  = false
+
 # 代码代码前缀
 VITE_PUBLIC_PATH = /
+
diff --git a/src/api/login/index.ts b/src/api/login/index.ts
index 93158f4d..b56b94de 100644
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@@ -8,7 +8,8 @@ import { useUserInfo } from "/@/stores/userInfo";
  * @param data
  */
 export const login = (data: any) => {
-    let basicAuth = 'Basic ' + window.btoa('pig:pig')
+    const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_OAUTH2_PASSWORD_CLIENT)
+    Session.set('basicAuth', basicAuth)
     return request({
         url: '/admin/oauth2/token',
         method: 'post',
@@ -24,7 +25,8 @@ export const login = (data: any) => {
 export const loginByMobile = (mobile: any, code: any) => {
     const grant_type = 'mobile'
     const scope = 'server'
-    let basicAuth = 'Basic ' + window.btoa('app:app')
+    const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_OAUTH2_MOBILE_CLIENT)
+    Session.set('basicAuth', basicAuth)
 
     return request({
         url: '/admin/oauth2/token',
@@ -41,7 +43,8 @@ export const loginByMobile = (mobile: any, code: any) => {
 export const loginBySocial = (state: string, code: string) => {
     const grant_type = 'mobile'
     const scope = 'server'
-    let basicAuth = 'Basic ' + window.btoa('social:social')
+    const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_OAUTH2_SOCIAL_CLIENT)
+    Session.set('basicAuth', basicAuth)
 
     return request({
         url: '/admin/oauth2/token',
@@ -66,7 +69,7 @@ export const refreshTokenApi = (refresh_token: string) => {
     const grant_type = 'refresh_token'
     const scope = 'server'
     // 获取当前选中的 basic 认证信息
-    let basicAuth = 'Basic ' + window.btoa('pig:pig')
+    const basicAuth = Session.get('basicAuth')
 
     return request({
         url: '/admin/oauth2/token',
@@ -85,7 +88,7 @@ export const refreshTokenApi = (refresh_token: string) => {
  * @param refreshLock
  */
 export const checkToken = (refreshTime: number, refreshLock: boolean) => {
-    let basicAuth = 'Basic ' + window.btoa('pig:pig')
+    const basicAuth = Session.get('basicAuth')
     request({
         url: '/admin/token/check_token',
         headers: {
diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue
index 011a2d4c..42d578b4 100644
--- a/src/layout/navBars/breadcrumb/user.vue
+++ b/src/layout/navBars/breadcrumb/user.vue
@@ -7,27 +7,24 @@
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{
-              $t('user.dropdownLarge')
-            }}
+            $t('user.dropdownLarge')
+          }}
           </el-dropdown-item>
           <el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{
-              $t('user.dropdownDefault')
-            }}
+            $t('user.dropdownDefault')
+          }}
           </el-dropdown-item>
           <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{
-              $t('user.dropdownSmall')
-            }}
+            $t('user.dropdownSmall')
+          }}
           </el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
     <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
       <div class="layout-navbars-breadcrumb-user-icon">
-        <i
-            class="iconfont"
-            :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
-            :title="$t('user.title1')"
-        ></i>
+        <i class="iconfont" :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
+          :title="$t('user.title1')"></i>
       </div>
       <template #dropdown>
         <el-dropdown-menu>
@@ -38,7 +35,7 @@
     </el-dropdown>
     <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
       <el-icon :title="$t('user.title2')">
-        <ele-Search/>
+        <ele-Search />
       </el-icon>
     </div>
     <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
@@ -49,30 +46,27 @@
         <template #reference>
           <el-badge :is-dot="isDot">
             <el-icon :title="$t('user.title4')">
-              <ele-Bell/>
+              <ele-Bell />
             </el-icon>
           </el-badge>
         </template>
         <template #default>
-          <UserNews ref="newsRef"/>
+          <UserNews ref="newsRef" />
         </template>
       </el-popover>
     </div>
     <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
-      <i
-          class="iconfont"
-          :title="state.isScreenfull ? $t('user.title6') : $t('user.title5')"
-          :class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
-      ></i>
+      <i class="iconfont" :title="state.isScreenfull ? $t('user.title6') : $t('user.title5')"
+        :class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
     </div>
     <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
-			<span class="layout-navbars-breadcrumb-user-link">
-				<img :src="userInfos.user.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5"/>
-				{{ userInfos.user.username }}
-				<el-icon class="el-icon--right">
-					<ele-ArrowDown/>
-				</el-icon>
-			</span>
+      <span class="layout-navbars-breadcrumb-user-link">
+        <img :src="userInfos.user.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+        {{ userInfos.user.username }}
+        <el-icon class="el-icon--right">
+          <ele-ArrowDown />
+        </el-icon>
+      </span>
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item command="/home">{{ $t('user.dropdown1') }}</el-dropdown-item>
@@ -81,25 +75,25 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
-    <Search ref="searchRef"/>
-    <global-websocket uri="/admin/ws/info" v-if="themeConfig.isWebsocket" @rollback="rollback"/>
+    <Search ref="searchRef" />
+    <global-websocket uri="/admin/ws/info" v-if="websocketEnable" @rollback="rollback" />
   </div>
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUser">
-import {defineAsyncComponent, ref, computed, reactive, onMounted} from 'vue';
-import {useRouter} from 'vue-router';
-import {ElMessageBox, ElMessage} from 'element-plus';
+import { defineAsyncComponent, ref, computed, reactive, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessageBox, ElMessage } from 'element-plus';
 import screenfull from 'screenfull';
-import {useI18n} from 'vue-i18n';
-import {storeToRefs} from 'pinia';
-import {useUserInfo} from '/@/stores/userInfo';
-import {useThemeConfig} from '/@/stores/themeConfig';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '/@/stores/userInfo';
+import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
 import mittBus from '/@/utils/mitt';
-import {Session, Local} from '/@/utils/storage';
-import {formatAxis} from "/@/utils/formatTime";
-import {useMsg} from "/@/stores/msg";
+import { Session, Local } from '/@/utils/storage';
+import { formatAxis } from "/@/utils/formatTime";
+import { useMsg } from "/@/stores/msg";
 
 // 引入组件
 const GlobalWebsocket = defineAsyncComponent(() => import('/@/components/Websocket/index.vue'))
@@ -107,12 +101,12 @@ const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb
 const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
 
 // 定义变量内容
-const {locale, t} = useI18n();
+const { locale, t } = useI18n();
 const router = useRouter();
 const stores = useUserInfo();
 const storesThemeConfig = useThemeConfig();
-const {userInfos} = storeToRefs(stores);
-const {themeConfig} = storeToRefs(storesThemeConfig);
+const { userInfos } = storeToRefs(stores);
+const { themeConfig } = storeToRefs(storesThemeConfig);
 const searchRef = ref();
 const newsRef = ref();
 
@@ -122,10 +116,13 @@ const state = reactive({
   disabledSize: 'large',
 });
 
+// 是否开启websocket
+const websocketEnable = ref(import.meta.env.VITE_WEBSOCKET_ENABLE === 'true')
+
 // 设置分割样式
 const layoutUserFlexNum = computed(() => {
   let num: string | number = '';
-  const {layout, isClassicSplitMenu} = themeConfig.value;
+  const { layout, isClassicSplitMenu } = themeConfig.value;
   const layoutArr: string[] = ['defaults', 'columns'];
   if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
   else num = '';
@@ -174,14 +171,14 @@ const onHandleCommandClick = (path: string) => {
         }
       },
     })
-        .then(async () => {
-          // 清除缓存/token等
-          Session.clear();
-          // 使用 reload 时，不需要调用 resetRoute() 重置路由
-          window.location.reload();
-        })
-        .catch(() => {
-        });
+      .then(async () => {
+        // 清除缓存/token等
+        Session.clear();
+        // 使用 reload 时，不需要调用 resetRoute() 重置路由
+        window.location.reload();
+      })
+      .catch(() => {
+      });
   } else if (path === 'wareHouse') {
     window.open('https://gitee.com/lyt-top/vue-next-admin');
   } else {
@@ -216,7 +213,7 @@ const initI18nOrSize = (value: string, attr: string) => {
 
 // 获取到消息
 const rollback = (msg: string) => {
-  useMsg().setMsg({label: 'websocket消息', value: msg, time: formatAxis(new Date())})
+  useMsg().setMsg({ label: 'websocket消息', value: msg, time: formatAxis(new Date()) })
 }
 
 const isDot = computed(() => {
diff --git a/src/stores/themeConfig.ts b/src/stores/themeConfig.ts
index a10492a5..1a8af85d 100644
--- a/src/stores/themeConfig.ts
+++ b/src/stores/themeConfig.ts
@@ -141,11 +141,7 @@ export const useThemeConfig = defineStore('themeConfig', {
             // 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
             globalI18n: 'zh-cn',
             // 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
-            globalComponentSize: 'large',
-            // 是否开启websocket 消息接受,
-            isWebsocket: false,
-            // 是否开启注册
-            isRegister: true
+            globalComponentSize: 'large'
         },
 
     }),
diff --git a/src/stores/userInfo.ts b/src/stores/userInfo.ts
index c09020c4..7660a8db 100644
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@@ -1,6 +1,6 @@
-import {defineStore} from 'pinia';
-import {Session} from '/@/utils/storage';
-import {getUserInfo, login, loginByMobile, loginBySocial, refreshTokenApi} from '/@/api/login/index'
+import { defineStore } from 'pinia';
+import { Session } from '/@/utils/storage';
+import { getUserInfo, login, loginByMobile, loginBySocial, refreshTokenApi } from '/@/api/login/index'
 import other from '/@/utils/other'
 
 /**
@@ -24,7 +24,7 @@ export const useUserInfo = defineStore('userInfo', {
             // 密码加密
             const user = other.encryption({
                 data: data,
-                key: 'pigxpigxpigxpigx',
+                key: import.meta.env.VITE_PWD_ENC_KEY,
                 param: ['password']
             })
             return new Promise((resolve, reject) => {
diff --git a/src/types/pinia.d.ts b/src/types/pinia.d.ts
index 556b555a..c55dda1b 100644
--- a/src/types/pinia.d.ts
+++ b/src/types/pinia.d.ts
@@ -82,8 +82,6 @@ declare interface ThemeConfigState {
         columnsAsideLayout: string;
         layout: string;
         isRequestRoutes: boolean;
-        isWebsocket: boolean;
-        isRegister: boolean,
         globalTitle: string;
         globalViceTitle: string;
         globalViceTitleMsg: string;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 8aeb6d1c..93e2c778 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -2,16 +2,16 @@
   <div class="login-container flex">
     <div class="login-left">
       <div class="login-left-logo">
-        <img :src="logoMini"/>
+        <img :src="logoMini" />
         <div class="login-left-logo-text">
           <span>{{ getThemeConfig.globalViceTitle }}</span>
           <span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
         </div>
       </div>
       <div class="login-left-img">
-        <img :src="loginMain"/>
+        <img :src="loginMain" />
       </div>
-      <img :src="loginBg" class="login-left-waves"/>
+      <img :src="loginBg" class="login-left-waves" />
     </div>
     <div class="login-right flex">
       <div class="login-right-warp flex-margin">
@@ -20,23 +20,23 @@
           <div class="login-right-warp-main-form">
             <div>
               <!--  租户选择 -->
-              <tenant/>
+              <tenant />
               <el-tabs v-model="tabsActiveName">
                 <!-- 用户名密码登录 -->
                 <el-tab-pane :label="$t('label.one1')" name="account">
-                  <Password @signInSuccess="signInSuccess"/>
+                  <Password @signInSuccess="signInSuccess" />
                 </el-tab-pane>
                 <!-- 手机号登录 -->
                 <el-tab-pane :label="$t('label.two2')" name="mobile">
-                  <Mobile @signInSuccess="signInSuccess"/>
+                  <Mobile @signInSuccess="signInSuccess" />
                 </el-tab-pane>
                 <!-- 社交登录 -->
                 <el-tab-pane :label="$t('label.three3')" name="social">
-                  <Social @signInSuccess="signInSuccess"/>
+                  <Social @signInSuccess="signInSuccess" />
                 </el-tab-pane>
                 <!-- 注册 -->
-                <el-tab-pane :label="$t('label.register')" name="register" v-if="getThemeConfig.isRegister">
-                  <Register @afterSuccess="tabsActiveName = 'account'"/>
+                <el-tab-pane :label="$t('label.register')" name="register" v-if="registerEnable">
+                  <Register @afterSuccess="tabsActiveName = 'account'" />
                 </el-tab-pane>
               </el-tabs>
             </div>
@@ -48,17 +48,17 @@
 </template>
 
 <script setup lang="ts" name="loginIndex">
-import {storeToRefs} from 'pinia';
-import {useThemeConfig} from '/@/stores/themeConfig';
-import {NextLoading} from '/@/utils/loading';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { NextLoading } from '/@/utils/loading';
 import logoMini from '/@/assets/logo-mini.svg';
 import loginMain from '/@/assets/login-main.svg';
 import loginBg from '/@/assets/login-bg.svg';
-import {useI18n} from 'vue-i18n';
-import {formatAxis} from '/@/utils/formatTime';
-import {useMessage} from '/@/hooks/message';
-import {Session} from '/@/utils/storage';
-import {initBackEndControlRoutes} from '/@/router/backEnd';
+import { useI18n } from 'vue-i18n';
+import { formatAxis } from '/@/utils/formatTime';
+import { useMessage } from '/@/hooks/message';
+import { Session } from '/@/utils/storage';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
 
 // 引入组件
 const Password = defineAsyncComponent(() => import('./component/password.vue'));
@@ -69,11 +69,14 @@ const Tenant = defineAsyncComponent(() => import('./component/tenant.vue'));
 
 // 定义变量内容
 const storesThemeConfig = useThemeConfig()
-const {themeConfig} = storeToRefs(storesThemeConfig)
-const {t} = useI18n()
+const { themeConfig } = storeToRefs(storesThemeConfig)
+const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 
+// 是否开启注册
+const registerEnable = ref(import.meta.env.VITE_REGISTER_ENABLE === 'true')
+
 // 默认选择账号密码登录方式
 const tabsActiveName = ref('account')