Browse Source

登录增加记住密码

develop
fuguobin 1 year ago
parent
commit
6130573742
  1. 2
      package.json
  2. 4
      src/types/auto-imports.d.ts
  3. 20
      src/utils/crypto.js
  4. 108
      src/utils/storage.ts
  5. 15
      src/views/login/index.scss
  6. 25
      src/views/login/index.vue
  7. 2
      vite.config.ts

2
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",

4
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']>

20
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();
}

108
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);
}

15
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,
background-color 99999s ease-out;
-webkit-transition: 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);

25
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) => {

2
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,

Loading…
Cancel
Save