登录增加记住密码

package.json

@@ -17,6 +17,7 @@
     "@wangeditor/editor-for-vue": "^5.1.10",
     "animate.css": "^4.1.1",
     "axios": "^1.3.4",
+    "crypto-js": "^4.2.0",
     "echarts": "^5.2.2",
     "element-plus": "^2.2.32",
     "mitt": "^3.0.1",
@@ -39,6 +40,7 @@
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@iconify-json/ep": "^1.1.8",
+    "@types/crypto-js": "^4.2.1",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.19.0",

src/types/auto-imports.d.ts

@@ -5,8 +5,6 @@ declare global {
   const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
-  const ElNotification: typeof import('element-plus/es')['ElNotification']
-  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -276,8 +274,6 @@ declare module 'vue' {
     readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
-    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
-    readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>

src/utils/crypto.js

@@ -0,0 +1,20 @@
+import CryptoJS from 'crypto-js';
+
+const key = CryptoJS.enc.Utf8.parse('1C1389D55E4522B2'); //十六位十六进制数作为密钥
+const iv = CryptoJS.enc.Utf8.parse('1C1389E43F01C1B2'); //十六位十六进制数作为密钥偏移量
+
+//解密方法
+export function decryption(word) {
+  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
+  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+  let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
+  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+  return decryptedStr.toString();
+}
+
+//加密方法
+export function encryption(word) {
+  let srcs = CryptoJS.enc.Utf8.parse(word);
+  let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
+  return encrypted.ciphertext.toString().toUpperCase();
+}

src/utils/storage.ts

@@ -0,0 +1,108 @@
+/**
+ * * 存储本地会话数据
+ * @param k 键名
+ * @param v 键值（无需stringiiy）
+ * @returns RemovableRef
+ */
+export const setLocalStorage = <T>(k: string, v: T) => {
+  try {
+    window.localStorage.setItem(k, JSON.stringify(v))
+  } catch (error) {
+    return false
+  }
+}
+
+/**
+ * * 获取本地会话数据
+ * @param k 键名
+ * @returns any
+ */
+export const getLocalStorage = (k: string) => {
+  const item = window.localStorage.getItem(k)
+  try {
+    return item ? JSON.parse(item) : item
+  } catch (err) {
+    return item
+  }
+}
+
+/**
+ * * 清除本地会话数据
+ * @param name
+ */
+export const clearLocalStorage = (name: string) => {
+  window.localStorage.removeItem(name)
+}
+
+/**
+ * * 存储临时会话数据
+ * @param k 键名
+ * @param v 键值
+ * @returns RemovableRef
+ */
+export const setSessionStorage = <T>(k: string, v: T) => {
+  try {
+    window.sessionStorage.setItem(k, JSON.stringify(v))
+  } catch (error) {
+    return false
+  }
+}
+
+/**
+ * * 获取临时会话数据
+ * @returns any
+ */
+export const getSessionStorage: (k: string) => any = (k: string) => {
+  const item = window.sessionStorage.getItem(k)
+  try {
+    return item ? JSON.parse(item) : item
+  } catch (err) {
+    return item
+  }
+}
+
+/**
+ * * 清除本地会话数据
+ * @param name
+ */
+export const clearSessioStorage = (name: string) => {
+  window.sessionStorage.removeItem(name)
+}
+
+/**
+ * * 设置 cookie
+ * @param name 键名
+ * @param cvalue 键值
+ * @param exdays 过期时间
+ */
+export const setCookie = (name: string, cvalue: string, exdays: number) => {
+  const d = new Date();
+  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+  const expires = "expires=" + d.toUTCString();
+  document.cookie = name + "=" + cvalue + "; " + expires;
+}
+
+/**
+ * * 获取 cookie
+ * @param cname 键名
+ * @returns string
+ */
+export const getCookie = (cname: string) => {
+  const name = cname + "=";
+  const ca = document.cookie.split(';');
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') c = c.substring(1);
+    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
+  }
+  return "";
+}
+
+/**
+ * * 清除 cookie 
+ * @param name 键名
+ * @returns string
+ */
+export const clearCookie = (name: string) => {
+  setCookie(name, "", -1);
+}

src/views/login/index.scss

@@ -78,8 +78,7 @@
               &:-webkit-autofill:focus,
               &:-webkit-autofill:active {
                 -webkit-transition-delay: 99999s;
-                -webkit-transition: color 99999s ease-out,
+                -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
-                  background-color 99999s ease-out;
               }
             }
           }
@@ -89,11 +88,19 @@
           line-height: normal;
         }
       }
+      .el-form-item.remember {
+        border: none;
+        background-color: transparent;
+        .el-checkbox {
+          height: 20px;
+          // color: var(--el-checkbox-checked-text-color);
+        }
+      }
     }
   }
 
   .video {
-    object-fit: cover
+    object-fit: cover;
   }
 
   .videoCover {
@@ -123,7 +130,6 @@
 
   .loginForm {
     .title {
-
       .switchLanguage,
       span {
         color: var(--el-text-color-regular);
@@ -135,7 +141,6 @@
 .videoContainer {
   .loginForm {
     .title {
-
       .switchLanguage,
       span {
         color: var(--el-color-white);

src/views/login/index.vue

@@ -50,6 +50,10 @@
           </div>
         </el-form-item> -->
 
+        <el-form-item class="remember">
+          <el-checkbox v-model="remember" size="large">记住密码</el-checkbox>
+        </el-form-item>
+
         <el-button class="width-100" size="default" type="primary" :loading="loading" @click.prevent="loginClick">
           {{ $t('login.login') }}
         </el-button>
@@ -81,12 +85,15 @@ import { LocationQuery, LocationQueryValue, useRoute } from 'vue-router';
 import { useSettingsStore } from '@/store/modules/settings';
 // import { getCaptchaApi } from '@/api/auth';
 import { LoginData } from '@/api/auth/types';
+import { setLocalStorage, getLocalStorage } from '@/utils/storage';
+import { encryption, decryption } from '@/utils/crypto';
 
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 const route = useRoute();
 const loginForm = ref(ElForm);
 const isCapslock = ref(false); // 是否大写锁定
+const remember = ref(false);
 const resizeStyle = ref(); //视频背景自适应样式
 const videoCanPlay = ref(false);
 
@@ -103,7 +110,7 @@ const loginRules = {
 };
 
 const loading = ref(false);
-const captchaBase64 = ref();
+// const captchaBase64 = ref();
 
 function validatePassword(rule: any, value: any, callback: any) {
   if (value.length < 6) {
@@ -120,6 +127,15 @@ function checkCapslock(e: any) {
 
 onMounted(() => {
   // getCaptcha();
+  resizeFun();
+  const loginInfo = getLocalStorage('loginInfo');
+  if (loginInfo != null && Object.keys(loginInfo).length >= 2) {
+    remember.value = true;
+    loginData.value.username = loginInfo.username;
+    loginData.value.password = decryption(loginInfo.password);
+  } else {
+    remember.value = false;
+  }
   resizeStyle.value = {
     height: '100vh',
     width: '100vw'
@@ -153,6 +169,13 @@ function loginClick() {
       userStore
         .login(loginData.value)
         .then(() => {
+          if (remember.value) {
+            const loginRemember = loginData.value;
+            loginRemember.password = encryption(loginData.value.password);
+            setLocalStorage('loginInfo', loginRemember);
+          } else {
+            setLocalStorage('loginInfo', {});
+          }
           const query: LocationQuery = route.query;
           const redirect = (query.redirect as LocationQueryValue) ?? '/';
           const otherQueryParams = Object.keys(query).reduce((account: any, current: string) => {

vite.config.ts

@@ -45,7 +45,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       hmr: true, //配置HMR
       proxy: {
         '/dev-api': {
-          // target: 'http://172.1.2.132:9010/', //本地接口地址
+          // target: 'http://172.1.2.146:9010/', //本地接口地址
           // target: 'http://172.1.2.90:9010/', //本地接口地址
           target: 'http://10.10.10.56:9010/', //线上测试接口地址
           changeOrigin: true,