验证码登陆

.env

@@ -2,4 +2,7 @@ VITE_PWD_ENC_KEY='thanks,rax4cloud'
 
 VITE_OAUTH2_PASSWORD_CLIENT='rax:rax'
 
+# OAUTH2 短信客户端信息
+VITE_OAUTH2_MOBILE_CLIENT='app:app'
+
 VITE_RAX_BASE_URL='/api'

src/api/login-phone.ts

@@ -0,0 +1,31 @@
+import request from '@/utils/request';
+import {Session} from "@/utils/storage";
+
+const FORM_CONTENT_TYPE = 'application/x-www-form-urlencoded';
+
+export const sendMobileCode = (mobile: any) => {
+    return request({
+        url: '/admin/mobile/' + mobile,
+        method: 'get',
+    });
+};
+
+
+export const loginByMobile = (mobile: any, code: any) => {
+
+    const grant_type = 'mobile';
+    const scope = 'server';
+    const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_OAUTH2_MOBILE_CLIENT);
+    Session.set('basicAuth', basicAuth);
+
+    return request({
+        url: '/admin/oauth2/token',
+        headers: {
+            skipToken: true,
+            Authorization: basicAuth,
+            'Content-Type': FORM_CONTENT_TYPE,
+        },
+        method: 'post',
+        data: {mobile: mobile, code: code, grant_type, scope},
+    });
+};

src/router/routes.ts

@@ -58,10 +58,10 @@ export const constantRoute = [
         ]
       },
       {
-        path: '/remote-manage',
+        path: '/remote-manage/remote-manage',
         name: '远程管理',
         component: () => import('@/views/remote-manage/index.vue'),
-        redirect: '/remote-manage/remote-manage',
+        // redirect: '/remote-manage/remote-manage',
         children: [
           {
             path: '/remote-manage/remote-manage',

src/views/login/login.vue

@@ -68,7 +68,7 @@
                 </template>
               </el-input>
             </el-form-item>
-                        <el-button class="login-btn" type="primary" @click="login('code')">登录</el-button>
+            <el-button class="login-btn" type="primary" @click="logWithPhone">登录</el-button>
           </div>
         </el-form>
       </div>
@@ -144,6 +144,7 @@ import * as loginApi from "@/api/login";
 import {Session} from "@/utils/storage";
 import * as hospitalApi from "@/api/hospital";
 import {REGEXP} from "@/enum/global-enum";
+import {loginByMobile, sendMobileCode} from "@/api/login-phone";
 
 
 //引入用户相关的小仓库
@@ -156,7 +157,7 @@ const phoneAreas: any = getPhoneAreasData()
 //定义变量控制按钮加载效果
 let loading = ref(false);
 //自定义校验规则函数
-const validatorPhone = (rule: any, value: any, callback: any) => {
+const validatorPhone = (value: any, callback: any) => {
   if (value.indexOf('****') >= 0) {
     return callback().trim();
   }
@@ -167,6 +168,7 @@ const validatorPhone = (rule: any, value: any, callback: any) => {
   }
 }
 
+
 const loginRules = reactive({
   account: [
     {required: true, message: '请输入用户名', trigger: 'change'}
@@ -305,6 +307,7 @@ const selectPhoneArea = (e: string) => {
 const sendCode = () => {
   if (loginParams.value.isSendCode) return
   let num = 60
+  sendMobileCode(loginParams.value.phone);
   ElMessage.success('发送成功！')
   loginParams.value.isSendCode = true
   loginParams.value.sendText = '请' + num + '秒后重新发送'
@@ -347,6 +350,34 @@ function refreshImg() {
   captchaImgUrl.value = '/api/admin/code/textImage?randomStr=' + randomStr
 }
 
+function logWithPhone() {
+  loginByMobile(loginParams.value.phone, loginParams.value.code)
+      .then((data: any) => {
+        sliderVConf.value.isShowSelf = false
+        if (data.code == 1 || data.error) {
+          ElMessage.error(data.msg ? data.msg : data.error)
+          loading.value = false
+        } else {
+          // 存储token 信息
+          loginPost(data)
+          router.removeRoute("root");
+          router.addRoute({
+            name: "root",
+            path: "/",
+            redirect: "/home"
+          })
+          router.replace('/home')
+          loading.value = false
+          ElNotification({
+            type: 'success',
+            message: '欢迎回来',
+            title: `HI,${getTime()}好`
+          });
+        }
+      })
+
+}
+
 function sliderSuccess() {
   loginApi.login({
     username: loginParams.value.account, // 用户名

vite.config.ts

@@ -24,16 +24,16 @@ export default defineConfig({
     proxy: {
       '/api': {
         // target: 'http://localhost:9999', // 目标服务器地址
-        // target: 'http://localhost:6379', // 目标服务器地址
-        target: 'http://110.41.142.124:6379', // 目标服务器地址
+        target: 'http://localhost:6379', // 目标服务器地址
+        // target: 'http://110.41.142.124:6379', // 目标服务器地址
         ws: true, // 是否启用 WebSocket
         changeOrigin: true, // 是否修改请求头中的 Origin 字段
         rewrite: (path) => path.replace(/^\/api/, ''),
       },
       '/socket.io': {
         // target: 'ws://localhost:9999',
-        // target: 'ws://localhost:6379',
-        target: 'ws://110.41.142.124:6379',
+        target: 'ws://localhost:6379',
+        // target: 'ws://110.41.142.124:6379',
         ws: true,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/socket.io/, ''),