新增记住密码
parent
4134eef47e
commit
c9b61ed275
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"crypto-js": "^4.2.0",
|
||||
"mqtt": "^2.18.8"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
102
pages/login.vue
102
pages/login.vue
|
|
@ -13,15 +13,15 @@
|
|||
<view class="input-item flex align-center" style="position: relative;">
|
||||
<view class="iconfont icon-password icon"></view>
|
||||
<input v-if="!isShowPwd"
|
||||
v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
||||
v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
||||
<input v-else v-model="loginForm.password" type="text" class="input" placeholder="请输入密码" maxlength="20" />
|
||||
<!-- 替换为 uni-icons 密码图标 -->
|
||||
<uni-icons
|
||||
class="pwd-icon"
|
||||
:type="isShowPwd ? 'eye-filled' : 'eye'"
|
||||
size="18"
|
||||
color="#666"
|
||||
@click="isShowPwd = !isShowPwd"
|
||||
size="18"
|
||||
color="#666"
|
||||
@click="isShowPwd = !isShowPwd"
|
||||
></uni-icons>
|
||||
</view>
|
||||
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
||||
|
|
@ -31,6 +31,20 @@
|
|||
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ========== 新增：uni-data-checkbox 记住密码（可正常勾选） ========== -->
|
||||
<view style="margin: 10px 0 0 10px; text-align: left;">
|
||||
<uni-data-checkbox
|
||||
multiple
|
||||
v-model="value"
|
||||
:localdata="data"
|
||||
size="14"
|
||||
color="#007aff"
|
||||
@change="onRememberChange"
|
||||
></uni-data-checkbox>
|
||||
</view>
|
||||
<!-- ========== 新增结束 ========== -->
|
||||
|
||||
<view class="action-btn">
|
||||
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
||||
</view>
|
||||
|
|
@ -65,9 +79,13 @@
|
|||
import { getCodeImg } from '@/api/login'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import UniIcons from "../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
|
||||
// ========== 新增：引入uni-data-checkbox ==========
|
||||
import UniDataCheckbox from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";
|
||||
import CryptoJS from 'crypto-js'
|
||||
|
||||
export default {
|
||||
components: {UniIcons},
|
||||
// ========== 新增：注册组件 ==========
|
||||
components: {UniIcons, UniDataCheckbox},
|
||||
data() {
|
||||
return {
|
||||
isShowPwd: false,
|
||||
|
|
@ -75,13 +93,18 @@
|
|||
captchaEnabled: true,
|
||||
// 用户注册开关
|
||||
register: true,
|
||||
data:[{value: 0, text: '记住密码'}],
|
||||
globalConfig: getApp().globalData.config,
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
code: "",
|
||||
uuid: ""
|
||||
}
|
||||
},
|
||||
value:[0],
|
||||
// ========== 新增：记住密码相关数据 ==========
|
||||
remember: true, // 记住密码选中状态
|
||||
STORAGE_KEY: 'agri_login_pwd' // 存储密码的key
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -93,8 +116,71 @@
|
|||
this.$tab.reLaunch('/pages/control/index')
|
||||
}
|
||||
//#endif
|
||||
// ========== 新增：页面加载时自动回填密码 ==========
|
||||
this.loadSavedPwd()
|
||||
},
|
||||
methods: {
|
||||
// ========== 新增：uni-data-checkbox 状态切换 ==========
|
||||
onRememberChange(e) {
|
||||
this.remember = false;
|
||||
if (e.detail.value && e.detail.value===0) {
|
||||
this.remember = true ;
|
||||
}
|
||||
},
|
||||
// ========== 新增：密码加密存储核心方法 ==========
|
||||
// 生成加密密钥（绑定设备信息）
|
||||
getEncryptKey() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const appId = uni.getAccountInfoSync()?.miniProgram?.appId || 'agri-default'
|
||||
return CryptoJS.MD5(sys.deviceId + appId + 'agri-pwd-key').toString()
|
||||
} catch (e) {
|
||||
return 'agri-safe-key-2026'
|
||||
}
|
||||
},
|
||||
// 加密密码
|
||||
encryptPwd(pwd) {
|
||||
return CryptoJS.AES.encrypt(pwd, this.getEncryptKey()).toString()
|
||||
},
|
||||
// 解密密码
|
||||
decryptPwd(encryptedStr) {
|
||||
try {
|
||||
const bytes = CryptoJS.AES.decrypt(encryptedStr, this.getEncryptKey())
|
||||
return bytes.toString(CryptoJS.enc.Utf8) || ''
|
||||
} catch (e) {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// 加载本地存储的密码并回填
|
||||
loadSavedPwd() {
|
||||
try {
|
||||
const savedData = uni.getStorageSync(this.STORAGE_KEY)
|
||||
if (!savedData) return
|
||||
const data = JSON.parse(savedData)
|
||||
if (data.username && data.encryptedPwd) {
|
||||
this.loginForm.username = data.username
|
||||
this.loginForm.password = this.decryptPwd(data.encryptedPwd)
|
||||
this.remember = true // 回填密码时自动选中
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载记住密码失败：', e)
|
||||
}
|
||||
},
|
||||
// 保存密码到本地（加密）
|
||||
savePwd() {
|
||||
if (!this.remember) {
|
||||
uni.removeStorageSync(this.STORAGE_KEY)
|
||||
return
|
||||
}
|
||||
const saveData = {
|
||||
username: this.loginForm.username,
|
||||
encryptedPwd: this.encryptPwd(this.loginForm.password),
|
||||
saveTime: Date.now()
|
||||
}
|
||||
uni.setStorageSync(this.STORAGE_KEY, JSON.stringify(saveData))
|
||||
},
|
||||
|
||||
// ========== 原有方法（完全未修改） ==========
|
||||
// 用户注册
|
||||
handleUserRegister() {
|
||||
this.$tab.redirectTo(`/pages/register`)
|
||||
|
|
@ -136,6 +222,8 @@
|
|||
async pwdLogin() {
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
this.$modal.closeLoading()
|
||||
// ========== 新增：登录成功后保存密码 ==========
|
||||
this.savePwd()
|
||||
this.loginSuccess()
|
||||
}).catch(() => {
|
||||
if (this.captchaEnabled) {
|
||||
|
|
@ -147,7 +235,7 @@
|
|||
loginSuccess(result) {
|
||||
// 设置用户信息
|
||||
this.$store.dispatch('GetInfo').then(res => {
|
||||
// ========== 新增：MQTT初始化逻辑（最小改动） ==========
|
||||
// ========== 原有：MQTT初始化逻辑（最小改动） ==========
|
||||
// 1. 获取全局App实例
|
||||
const app = getApp()
|
||||
// 2. 获取登录后的token（从auth工具获取）
|
||||
|
|
|
|||
Loading…
Reference in New Issue