refactor(登录): 用localStorage替换Cookies存储登录信息
移除Cookies相关依赖,改用localStorage存储用户名和密码 优化记住密码功能,处理布尔值到字符串的转换 清理未使用的注释代码
This commit is contained in:
@@ -2,7 +2,6 @@
|
||||
<div class="login-page">
|
||||
<div class="login-box">
|
||||
<div class="login-left">
|
||||
|
||||
<div class="login-title-welcome">
|
||||
<img src="../assets/logo/logo.png" alt="logo" class="logo-img" />
|
||||
<span class="login-title">欢迎使用科伦普冷轧涂镀数智一体化平台</span>
|
||||
@@ -17,7 +16,6 @@
|
||||
</div>
|
||||
|
||||
<div class="login-right">
|
||||
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h2>登录</h2>
|
||||
<el-form-item prop="username">
|
||||
@@ -49,25 +47,14 @@
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <div class="login-illustration">
|
||||
<img src="https://sf3-scmcdn-cn.feishucdn.com/goofy/ee/suite/passport/static/login/img/light.ba71f7a1.png"
|
||||
alt="illustration" class="illustration-img" />
|
||||
<div class="login-slogan">
|
||||
<div class="slogan-title">先进团队,先用科伦普</div>
|
||||
<div class="slogan-desc">人、事、信息,一处搞定</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt' // 保留加密解密工具
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
@@ -75,8 +62,8 @@ export default {
|
||||
return {
|
||||
codeUrl: "",
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
username: "", // 默认账号为空
|
||||
password: "", // 默认密码为空
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
@@ -108,7 +95,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
this.getLocalStorage(); // 初始化读取localStorage,替换原来的getCookie
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
@@ -120,36 +107,36 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
// 读取localStorage中的账号密码(替换原来的getCookie方法)
|
||||
getLocalStorage() {
|
||||
const username = localStorage.getItem("username"); // 读取localStorage
|
||||
const password = localStorage.getItem("password");
|
||||
const rememberMe = localStorage.getItem('rememberMe');
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
username: username === null ? this.loginForm.username : username, // 无缓存则保持默认空值
|
||||
password: password === null ? this.loginForm.password : decrypt(password), // 解密后填充密码
|
||||
rememberMe: rememberMe === null ? false : (rememberMe === 'true'), // localStorage存储字符串,需转为布尔值
|
||||
code: "",
|
||||
uuid: ""
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
// 根据是否勾选“记住密码”,操作localStorage
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
// 存储账号(明文,可按需加密)、加密后的密码、记住密码状态
|
||||
localStorage.setItem("username", this.loginForm.username);
|
||||
localStorage.setItem("password", encrypt(this.loginForm.password));
|
||||
localStorage.setItem('rememberMe', this.loginForm.rememberMe.toString()); // 布尔值转字符串存储
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
// 不勾选则清除localStorage中的对应缓存
|
||||
localStorage.removeItem("username");
|
||||
localStorage.removeItem("password");
|
||||
localStorage.removeItem('rememberMe');
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
// this.$store.dispatch('category/getCategoryList');
|
||||
// this.$store.dispatch('category/getProductMap');
|
||||
// this.$store.dispatch('category/getRawMaterialMap');
|
||||
// this.$store.dispatch('category/getBomMap');
|
||||
// this.$store.dispatch('finance/getFinancialAccounts');
|
||||
// this.$store.dispatch('craft/getProcessList');
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(() => { });
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
|
||||
Reference in New Issue
Block a user