feat: uniapp 适配aj-captcha

yudao-ui-admin-uniapp/api/login.js

@@ -1,47 +1,60 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
-  const data = {
-    username,
-    password,
-    code,
-    uuid
-  }
-  return request({
-    url: '/system/auth/login',
-    headers: {
-      isToken: false
-    },
-    'method': 'post',
-    'data': data
-  })
+export function login(username, password, captchaVerification) {
+	const data = {
+		username,
+		password,
+		captchaVerification
+	}
+	return request({
+		url: '/system/auth/login',
+		headers: {
+			isToken: false
+		},
+		'method': 'POST',
+		'data': data
+	})
 }
 
 // 获取用户详细信息
 export function getInfo() {
-  return request({
-    url: '/system/auth/get-permission-info',
-    'method': 'get'
-  })
+	return request({
+		url: '/system/auth/get-permission-info',
+		'method': 'GET'
+	})
 }
 
 // 退出方法
 export function logout() {
-  return request({
-    url: '/system/auth/logout',
-    'method': 'post'
-  })
+	return request({
+		url: '/system/auth/logout',
+		'method': 'POST'
+	})
 }
 
 // 获取验证码
-export function getCodeImg() {
-  return request({
-    url: '/system/captcha/get-image',
-    headers: {
-      isToken: false
-    },
-    method: 'get',
-    timeout: 20000
-  })
+export function getCaptcha(data) {
+	return request({
+		url: '/captcha/get',
+		headers: {
+			isToken: false,
+			isTenant: false
+		},
+		method: 'POST',
+		'data': data
+	})
+}
+
+// 验证验证码
+export function checkCaptcha(data) {
+	return request({
+		url: '/captcha/check',
+		headers: {
+			isToken: false,
+			isTenant: false
+		},
+		method: 'POST',
+		'data': data
+	})
 }

yudao-ui-admin-uniapp/api/system/user.js

@@ -9,7 +9,7 @@ export function updateUserPwd(oldPassword, newPassword) {
   }
   return request({
     url: '/system/user/profile/update-password',
-    method: 'put',
+    method: 'PUT',
     params: data
   })
 }
@@ -18,7 +18,7 @@ export function updateUserPwd(oldPassword, newPassword) {
 export function getUserProfile() {
   return request({
     url: '/system/user/profile/get',
-    method: 'get'
+    method: 'GET'
   })
 }
 
@@ -26,7 +26,7 @@ export function getUserProfile() {
 export function updateUserProfile(data) {
   return request({
     url: '/system/user/profile/update',
-    method: 'put',
+    method: 'PUT',
     data: data
   })
 }
@@ -35,7 +35,7 @@ export function updateUserProfile(data) {
 export function uploadAvatar(data) {
   return upload({
     url: '/system/user/profile/update-avatar',
-    method: 'put',
+    method: 'PUT',
     name: data.name,
     filePath: data.filePath
   })

yudao-ui-admin-uniapp/components/verifition/utils/ase.js

@@ -0,0 +1,11 @@
+import CryptoJS from 'crypto-js'
+/**
+ * @word 要加密的内容
+ * @keyWord String  服务器随机返回的关键字
+ *  */
+export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
+  var key = CryptoJS.enc.Utf8.parse(keyWord);
+  var srcs = CryptoJS.enc.Utf8.parse(word);
+  var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
+  return encrypted.toString();
+}

yudao-ui-admin-uniapp/components/verifition/utils/request.js

@@ -0,0 +1,17 @@
+import config from '@/config'
+const baseUrl = config.baseUrl
+export const myRequest = (option={})=>{
+	return new Promise((reslove,reject)=>{
+		uni.request({
+			url: baseUrl + option.url, 
+			data :option.data,
+			method:option.method || "GET",
+			success: (result) => {
+				reslove(result)
+			},
+			fail:(error)=>{
+				reject(error)
+			}
+		})
+	})
+}

yudao-ui-admin-uniapp/config.js

@@ -1,7 +1,7 @@
 // 应用全局配置
 module.exports = {
   // baseUrl: 'http://localhost:8080',
-  baseUrl: 'http://localhost:48080/admin-api',
+  baseUrl: 'http://localhost:48080',
   // 应用信息
   appInfo: {
     // 应用名称

yudao-ui-admin-uniapp/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "crypto-js": "^4.0.0"
+  }
+}

yudao-ui-admin-uniapp/pages/login.vue

@@ -1,182 +1,163 @@
 <template>
-  <view class="normal-login-container">
-    <view class="logo-content align-center justify-center flex">
-      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
-      </image>
-      <text class="title">芋道移动端登录</text>
-    </view>
-    <view class="login-form-content">
-      <view class="input-item flex align-center">
-        <view class="iconfont icon-user icon"></view>
-        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
-      </view>
-      <view class="input-item flex align-center">
-        <view class="iconfont icon-password icon"></view>
-        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
-      </view>
-      <view class="input-item flex align-center" v-if="captchaEnabled">
-        <view class="iconfont icon-code icon"></view>
-        <input v-model="loginForm.code" class="input" placeholder="请输入验证码" maxlength="5" />
-        <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
-      </view>
-      <view class="action-btn">
-        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
-      </view>
-    </view>
-
-    <view class="xieyi text-center">
-      <text class="text-grey1">登录即代表同意</text>
-      <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
-      <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
-    </view>
-  </view>
+	<view class="normal-login-container">
+		<view class="logo-content align-center justify-center flex">
+			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
+			</image>
+			<text class="title">芋道移动端登录</text>
+		</view>
+		<view class="login-form-content">
+			<view class="input-item flex align-center">
+				<view class="iconfont icon-user icon"></view>
+				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
+			</view>
+			<view class="input-item flex align-center">
+				<view class="iconfont icon-password icon"></view>
+				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
+			</view>
+			<Verify @success="pwdLogin" :mode="'pop'" :captchaType="'blockPuzzle'"
+				:imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
+			<view class="action-btn">
+				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
+			</view>
+		</view>
+
+		<view class="xieyi text-center">
+			<text class="text-grey1">登录即代表同意</text>
+			<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
+			<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
+		</view>
+	</view>
 </template>
 
 <script>
-  import { getCodeImg } from '@/api/login'
-
-  export default {
-    data() {
-      return {
-        codeUrl: "",
-        captchaEnabled: true,
-        globalConfig: getApp().globalData.config,
-        loginForm: {
-          username: "admin",
-          password: "admin123",
-          code: "",
-          uuid: ''
-        }
-      }
-    },
-    created() {
-      this.getCode()
-    },
-    methods: {
-      // 隐私协议
-      handlePrivacy() {
-        let site = this.globalConfig.appInfo.agreements[0]
-        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
-      },
-      // 用户协议
-      handleUserAgrement() {
-        let site = this.globalConfig.appInfo.agreements[1]
-        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
-      },
-      // 获取图形验证码
-      getCode() {
-        getCodeImg().then(res => {
-          res = res.data;
-          this.captchaEnable = res.enable;
-          if (this.captchaEnable) {
-            this.codeUrl = "data:image/gif;base64," + res.img;
-            this.loginForm.uuid = res.uuid;
-          }
-        })
-      },
-      // 登录方法
-      async handleLogin() {
-        if (this.loginForm.username === "") {
-          this.$modal.msgError("请输入您的账号")
-        } else if (this.loginForm.password === "") {
-          this.$modal.msgError("请输入您的密码")
-        } else if (this.loginForm.code === "" && this.captchaEnabled) {
-          this.$modal.msgError("请输入验证码")
-        } else {
-          this.$modal.loading("登录中，请耐心等待...")
-          this.pwdLogin()
-        }
-      },
-      // 密码登录
-      async pwdLogin() {
-        this.$store.dispatch('Login', this.loginForm).then(() => {
-          this.$modal.closeLoading()
-          this.loginSuccess()
-        }).catch(() => {
-          if (this.captchaEnabled) {
-            this.getCode()
-          }
-        })
-      },
-      // 登录成功后，处理函数
-      loginSuccess(result) {
-        // 设置用户信息
-        this.$store.dispatch('GetInfo').then(res => {
-          this.$tab.reLaunch('/pages/index')
-        })
-      }
-    }
-  }
+	import Verify from "@/components/verifition/Verify"
+
+	export default {
+		name: 'Login',
+		components: {
+			Verify
+		},
+		data() {
+			return {
+				captchaEnabled: true,
+				globalConfig: getApp().globalData.config,
+				loginForm: {
+					username: "admin",
+					password: "admin123",
+					captchaVerification: ""
+				}
+			}
+		},
+		methods: {
+			// 隐私协议
+			handlePrivacy() {
+				let site = this.globalConfig.appInfo.agreements[0]
+				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
+			},
+			// 用户协议
+			handleUserAgrement() {
+				let site = this.globalConfig.appInfo.agreements[1]
+				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
+			},
+			// 登录方法
+			async handleLogin(params) {
+				if (this.loginForm.username === "") {
+					this.$modal.msgError("请输入您的账号")
+				} else if (this.loginForm.password === "") {
+					this.$modal.msgError("请输入您的密码")
+				} else {
+					this.$modal.loading("登录中，请耐心等待...")
+					// 显示验证码
+					this.$refs.verify.show()
+				}
+			},
+			// 密码登录
+			async pwdLogin(params) {
+				this.loginForm.captchaVerification = params.captchaVerification
+				this.$store.dispatch('Login', this.loginForm).then(() => {
+					this.$modal.closeLoading()
+					this.loginSuccess()
+				})
+			},
+			// 登录成功后，处理函数
+			loginSuccess(result) {
+				// 设置用户信息
+				this.$store.dispatch('GetInfo').then(res => {
+					this.$tab.reLaunch('/pages/index')
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
-
-  .normal-login-container {
-    width: 100%;
-
-    .logo-content {
-      width: 100%;
-      font-size: 21px;
-      text-align: center;
-      padding-top: 15%;
-
-      image {
-        border-radius: 4px;
-      }
-
-      .title {
-        margin-left: 10px;
-      }
-    }
-
-    .login-form-content {
-      text-align: center;
-      margin: 20px auto;
-      margin-top: 15%;
-      width: 80%;
-
-      .input-item {
-        margin: 20px auto;
-        background-color: #f5f6f7;
-        height: 45px;
-        border-radius: 20px;
-
-        .icon {
-          font-size: 38rpx;
-          margin-left: 10px;
-          color: #999;
-        }
-
-        .input {
-          width: 100%;
-          font-size: 14px;
-          line-height: 20px;
-          text-align: left;
-          padding-left: 15px;
-        }
-
-      }
-
-      .login-btn {
-        margin-top: 40px;
-        height: 45px;
-      }
-
-      .xieyi {
-        color: #333;
-        margin-top: 20px;
-      }
-    }
-
-    .easyinput {
-      width: 100%;
-    }
-  }
-
-  .login-code-img {
-    height: 45px;
-  }
+	page {
+		background-color: #ffffff;
+	}
+
+	.normal-login-container {
+		width: 100%;
+
+		.logo-content {
+			width: 100%;
+			font-size: 21px;
+			text-align: center;
+			padding-top: 15%;
+
+			image {
+				border-radius: 4px;
+			}
+
+			.title {
+				margin-left: 10px;
+			}
+		}
+
+		.login-form-content {
+			text-align: center;
+			margin: 20px auto;
+			margin-top: 15%;
+			width: 80%;
+
+			.input-item {
+				margin: 20px auto;
+				background-color: #f5f6f7;
+				height: 45px;
+				border-radius: 20px;
+
+				.icon {
+					font-size: 38rpx;
+					margin-left: 10px;
+					color: #999;
+				}
+
+				.input {
+					width: 100%;
+					font-size: 14px;
+					line-height: 20px;
+					text-align: left;
+					padding-left: 15px;
+				}
+
+			}
+
+			.login-btn {
+				margin-top: 40px;
+				height: 45px;
+			}
+
+			.xieyi {
+				color: #333;
+				margin-top: 20px;
+			}
+		}
+
+		.easyinput {
+			width: 100%;
+		}
+	}
+
+	.login-code-img {
+		height: 45px;
+	}
 </style>

yudao-ui-admin-uniapp/store/modules/user.js

@@ -42,10 +42,9 @@ const user = {
     Login({ commit }, userInfo) {
       const username = userInfo.username.trim()
       const password = userInfo.password
-      const code = userInfo.code
-      const uuid = userInfo.uuid
+      const captchaVerification = userInfo.captchaVerification
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username, password, captchaVerification).then(res => {
           res = res.data;
           // 设置 token
           setToken(res)
@@ -83,7 +82,6 @@ const user = {
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
         logout(state.token).then(() => {
-          commit('SET_TOKEN', '')
           commit('SET_ROLES', [])
           commit('SET_PERMISSIONS', [])
           removeToken()

yudao-ui-admin-uniapp/utils/request.js

@@ -5,7 +5,7 @@ import errorCode from '@/utils/errorCode'
 import { toast, showConfirm, tansParams } from '@/utils/common'
 
 let timeout = 10000
-const baseUrl = config.baseUrl
+const baseUrl = config.baseUrl + '/admin-api';
 
 const request = config => {
   // 是否需要设置 token