登录调试通了

2025-08-23 20:44:58 +08:00 · 2024-03-13 16:54:09 +08:00 · 2024-03-13 16:54:09 +08:00 · 2c3acbcaaf
parent e42ec83d42
commit 2c3acbcaaf
7 changed files with 497 additions and 402 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+VITE_PWD_ENC_KEY='thanks,rax'
--- a/index.html
+++ b/index.html
@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer"/>
    <title>瑞鞍星医疗科技</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
--- a/package.json
+++ b/package.json
@ -20,7 +20,8 @@
    "vant": "^4.8.3",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "crypto-js": "4.2.0"
  },
  "devDependencies": {
    "@types/js-cookie": "^3.0.6",
--- a/src/api/acl/login.ts
+++ b/src/api/acl/login.ts
@ -0,0 +1,26 @@
+import axios from "axios";
+import * as other from "@/utils/other";
+import {HOST} from "@/utils/request";
+
+const FORM_CONTENT_TYPE = 'application/x-www-form-urlencoded';
+
+export const login = (data: any) => {
+
+    const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_PWD_ENC_KEY);
+
+    let encPassword = data.password;
+
+    encPassword = other.encryption(data.password, "thanks,rax");
+    data.grant_type = 'password';
+    data.scope = 'server';
+    return axios.request({
+        url: '/api/admin/oauth2/token',
+        method: 'post',
+        data: {...data, password: encPassword},
+        headers: {
+            skipToken: true,
+            Authorization: basicAuth,
+            'Content-Type': FORM_CONTENT_TYPE,
+        },
+    });
+};
--- a/src/utils/other.ts
+++ b/src/utils/other.ts
@ -0,0 +1,33 @@
+// @ts-ignore
+import * as CryptoJS from 'crypto-js';
+
+/**
+ *加密处理
+ */
+export function encryption(src: string, keyWord: string) {
+    const key = CryptoJS.enc.Utf8.parse(keyWord);
+    // 加密
+    var encrypted = CryptoJS.AES.encrypt(src, key, {
+        iv: key,
+        mode: CryptoJS.mode.CFB,
+        padding: CryptoJS.pad.NoPadding,
+    });
+    return encrypted.toString();
+}
+
+/**
+ *  解密
+ * @param {*} params 参数列表
+ * @returns 明文
+ */
+export function decryption(src: string, keyWord: string) {
+    const key = CryptoJS.enc.Utf8.parse(keyWord);
+    // 解密逻辑
+    var decryptd = CryptoJS.AES.decrypt(src, key, {
+        iv: key,
+        mode: CryptoJS.mode.CFB,
+        padding: CryptoJS.pad.NoPadding,
+    });
+
+    return decryptd.toString(CryptoJS.enc.Utf8);
+}
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@ -4,7 +4,7 @@
    <div class="right-content">
      <div class="select-hospital-box">
        <el-select class="select-hospital" v-model="currentHospital" size="small" @change="selectHospital">
-                    <el-option v-for="item in hospitals" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in hospitals" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </div>

@ -44,12 +44,14 @@
                  <div @click.stop style="display: flex;align-items: center;">
                    <el-dropdown @command="selectPhoneArea">
                                                  <span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon>
-                                                          <DCaret />
+                                                          <DCaret/>
                                                      </el-icon></span>
                      <template #dropdown>
                        <el-dropdown-menu>
-                                                          <el-dropdown-item v-for="item in phoneAreas" :command="item">{{ item
-                                                          }}</el-dropdown-item>
+                          <el-dropdown-item v-for="item in phoneAreas" :command="item">{{
+                              item
+                            }}
+                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
@ -72,7 +74,7 @@
        <div class="header-box">
          <span class="title">新用户申请</span>
          <el-icon @click="isShowRegister = false">
-                              <Close />
+            <Close/>
          </el-icon>
        </div>

@ -93,19 +95,19 @@
          <el-form-item label="医院" prop="hospital">
            <el-select v-model="registerParams.hospital" style="width: 100%;">
              <el-option v-for="item in hospitals" :key="item.value" :label="item.label"
-                                      :value="item.value" />
+                         :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="registerParams.sex">
-                                  <el-radio label="男" />
-                                  <el-radio label="女" />
+              <el-radio label="男"/>
+              <el-radio label="女"/>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="registerParams.code" placeholder="请输入验证码"
                      style="width: calc(100% - 110px);"></el-input>
-                              <img width="100" height="32" style="margin-left: 10px;" :src="captchaImgUrl" />
+            <img width="100" height="32" style="margin-left: 10px;" :src="captchaImgUrl"/>
            <a class="change_img" @click="refreshImg" href="#">看不清？</a>
          </el-form-item>

@ -119,21 +121,22 @@
    </div>
  </div>
  <SliderVerify v-model:isShowSelf="sliderVConf.isShowSelf" :width="sliderVConf.width" :imgUrl="sliderImgUrl"
-        :height="sliderVConf.height" @success="toHome"></SliderVerify>
+                :height="sliderVConf.height" @success="sliderSuccess"></SliderVerify>
 </template>

 <script lang='ts' setup>
-import { ElNotification } from 'element-plus';
+import {ElNotification} from 'element-plus';
 //引入获取当前时间的函数
-import { getTime } from '@/utils/time';
+import {getTime} from '@/utils/time';
 import {onMounted, reactive, ref, toRefs, watch} from 'vue'
-import {useRouter,useRoute} from 'vue-router'
+import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {useLoginStore} from '@/stores/user-info-store'
 import {getHospitalsData, getPhoneAreasData} from '@/static-data/core'
 import {v4} from "uuid";
-import {HOST} from "@/utils/request";
+import {HOST, post} from "@/utils/request";
 import SliderVerify from "@/components/SliderVerify/index.vue";
+import * as loginApi from "@/api/acl/login";


 //引入用户相关的小仓库
@ -190,36 +193,36 @@ const validatorPhone = (rule: any, value: any, callback: any) => {

 const loginRules = reactive({
  account: [
-        { required: true, validator: validatorUserName, trigger: 'change' },
+    {required: true, validator: validatorUserName, trigger: 'change'},
  ],
  password: [
-        { required: true, validator: validatorPassword, trigger: 'change' },
+    {required: true, validator: validatorPassword, trigger: 'change'},
  ],
  phone: [
-        { required: true, validator:validatorPhone, trigger: 'blur' },
+    {required: true, validator: validatorPhone, trigger: 'blur'},
  ],
  code: [
-        { required: true, message: '请输入验证码', trigger: 'blur' },
+    {required: true, message: '请输入验证码', trigger: 'blur'},
  ]
 })
 const registerRules = reactive({
  account: [
-        { required: true, validator: validatorUserName, trigger: 'change' },
+    {required: true, validator: validatorUserName, trigger: 'change'},
  ],
  password: [
-        { required: true, validator: validatorUserName, trigger: 'change' },
+    {required: true, validator: validatorUserName, trigger: 'change'},
  ],
  name: [
-        { required: true, message: '请输入用户名', trigger: 'blur' },
+    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  phone: [
-        { required: true, validator:validatorPhone, trigger: 'change' },
+    {required: true, validator: validatorPhone, trigger: 'change'},
  ],
  hospital: [
-        { required: true, message: '请选择医院', trigger: 'blur' },
+    {required: true, message: '请选择医院', trigger: 'blur'},
  ],
  code: [
-        { required: true, message: '请输入验证码', trigger: 'blur' },
+    {required: true, message: '请输入验证码', trigger: 'blur'},
  ]
 })

@ -281,7 +284,8 @@ const register = async () => {
        loginParams.value.name = registerFormRef.value.name
        currentHospital.value = registerFormRef.value.hospital
        toHome()
-            }).catch(() => { })
+      }).catch(() => {
+      })
    } else {
      // console.log('error submit!', fields)
    }
@ -363,6 +367,18 @@ function refreshImg() {
  captchaImgUrl.value = HOST + '/admin/code/textImage?randomStr=' + randomStr
 }

+function sliderSuccess() {
+  loginApi.login({
+    username: loginParams.value.account, // 用户名
+    password: loginParams.value.password, // 密码
+    randomStr: v4()
+  }).then((data: any) => {
+    console.log(data);
+  })
+
+  // toHome()
+}
+
 const toHome = () => {

  ElNotification({
@ -413,6 +429,7 @@ const toHome = () => {
    background: url(@/assets/imgs/login/login_bck.png) no-repeat;
    background-size: cover;
  }
+
  .right-content {
    position: relative;
    width: 50%;
@ -522,29 +539,35 @@ const toHome = () => {
      min-height: 300px;
      padding: 50px;
      background: white;
+
      .header-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
+
        .title {
          font-size: 20px;
          color: $main-color;
          font-weight: 600;
        }
+
        .el-icon {
          cursor: pointer;
        }
      }
+
      .footer-box {
        padding-left: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
+
        .el-button {
          font-size: 16px;
          padding: 5px 50px;
        }
-                &>span {
+
+        & > span {
          cursor: pointer;
          font-size: 18px;
          color: #909399;
--- a/vite.config.ts
+++ b/vite.config.ts
@ -19,5 +19,15 @@ export default defineConfig({
        additionalData: '@import "./src/assets/css/variable.scss";' //引入scss文件
      }
    }
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:9999', // 目标服务器地址
+        ws: true, // 是否启用 WebSocket
+        changeOrigin: true, // 是否修改请求头中的 Origin 字段
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      }
+    }
  }
 })