提交 c8021ef3 编写于 作者: V vben

chore: changed login cache from sessionStorage to LocalStorage

上级 4f98978e
......@@ -4,6 +4,10 @@
- 全局 loading 添加文本
### 🎫 Chores
- 登录缓存从 sessionStorage 改为 LocalStorage
### ⚡ Performance Improvements
- Layout 界面布局样式调整
......
......@@ -2,7 +2,7 @@
import type { App } from 'vue';
import { Form, Input } from 'ant-design-vue';
import { Form, Input, Row, Col } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
import './spin';
......@@ -11,4 +11,6 @@ export function setupAntd(app: App<Element>) {
// 这两个组件在登录也就用。全局注册
app.use(Form);
app.use(Input);
app.use(Row);
app.use(Col);
}
......@@ -21,7 +21,7 @@ import { tabStore } from './tab';
import { loginApi, getUserInfoById } from '/@/api/sys/user';
import { setSession, getSession, clearSession, clearLocal } from '/@/utils/helper/persistent';
import { setLocal, getLocal, clearSession, clearLocal } from '/@/utils/helper/persistent';
// import { FULL_PAGE_NOT_FOUND_ROUTE } from '/@/router/constant';
export type UserInfo = Omit<GetUserInfoByUserIdModel, 'roles'>;
......@@ -40,17 +40,15 @@ class User extends VuexModule {
private roleListState: RoleEnum[] = [];
get getUserInfoState(): UserInfo {
return this.userInfoState || (getSession(USER_INFO_KEY) as UserInfo) || {};
return this.userInfoState || (getLocal(USER_INFO_KEY) as UserInfo) || {};
}
get getTokenState(): string {
return this.tokenState || (getSession(TOKEN_KEY) as string);
return this.tokenState || (getLocal(TOKEN_KEY) as string);
}
get getRoleListState(): RoleEnum[] {
return this.roleListState.length > 0
? this.roleListState
: (getSession(ROLES_KEY) as RoleEnum[]);
return this.roleListState.length > 0 ? this.roleListState : (getLocal(ROLES_KEY) as RoleEnum[]);
}
@Mutation
......@@ -64,7 +62,7 @@ class User extends VuexModule {
commitUserInfoState(info: UserInfo): void {
this.userInfoState = info;
if (info) {
setSession(USER_INFO_KEY, info);
setLocal(USER_INFO_KEY, info, true);
}
}
......@@ -72,7 +70,7 @@ class User extends VuexModule {
commitRoleListState(roleList: RoleEnum[]): void {
this.roleListState = roleList;
if (roleList) {
setSession(ROLES_KEY, roleList);
setLocal(ROLES_KEY, roleList, true);
}
}
......@@ -80,7 +78,7 @@ class User extends VuexModule {
commitTokenState(info: string): void {
this.tokenState = info;
if (info) {
setSession(TOKEN_KEY, info);
setLocal(TOKEN_KEY, info, true);
}
}
......
......@@ -27,9 +27,13 @@ function initCache() {
}
initCache();
export function setLocal(key: string, value: any) {
export function setLocal(key: string, value: any, immediate = false) {
cacheStore.local[BASE_LOCAL_CACHE_KEY] = cacheStore.local[BASE_LOCAL_CACHE_KEY] || {};
cacheStore.local[BASE_LOCAL_CACHE_KEY][key] = value;
if (immediate) {
const localCache = cacheStore.local;
ls.set(BASE_LOCAL_CACHE_KEY, localCache);
}
}
export function getLocal<T>(key: string): T | null {
......@@ -49,9 +53,13 @@ export function clearLocal() {
cacheStore.local = {};
}
export function setSession(key: string, value: any) {
export function setSession(key: string, value: any, immediate = false) {
cacheStore.session[BASE_SESSION_CACHE_KEY] = cacheStore.session[BASE_SESSION_CACHE_KEY] || {};
cacheStore.session[BASE_SESSION_CACHE_KEY][key] = value;
if (immediate) {
const cache = cacheStore.session;
ls.set(BASE_SESSION_CACHE_KEY, cache);
}
}
export function removeSession(key: string) {
......
......@@ -11,19 +11,34 @@
<a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
<a-form-item name="account">
<a-input size="large" v-model:value="formData.account" placeholder="vben" />
<a-input size="large" v-model:value="formData.account" placeholder="Username: vben" />
</a-form-item>
<a-form-item name="password">
<a-input-password
size="large"
visibilityToggle
v-model:value="formData.password"
placeholder="123456"
placeholder="Password: 123456"
/>
</a-form-item>
<a-form-item name="verify" v-if="openLoginVerify">
<!-- <a-form-item name="verify" v-if="openLoginVerify">
<BasicDragVerify v-model:value="formData.verify" ref="verifyRef" />
</a-form-item>
</a-form-item> -->
<a-row>
<a-col :span="12">
<a-form-item>
<!-- 未做逻辑,需要自行处理 -->
<a-checkbox v-model:checked="autoLogin" size="small">自动登录</a-checkbox>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :style="{ 'text-align': 'right' }">
<!-- 未做逻辑,需要自行处理 -->
<a-button type="link" size="small">忘记密码</a-button>
</a-form-item>
</a-col>
</a-row>
<a-form-item>
<a-button
type="primary"
......@@ -42,28 +57,44 @@
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, unref, toRaw, computed } from 'vue';
import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
import {
defineComponent,
reactive,
ref,
unref,
toRaw,
// computed
} from 'vue';
import { Checkbox } from 'ant-design-vue';
import Button from '/@/components/Button/index.vue';
// import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
import { userStore } from '/@/store/modules/user';
import { appStore } from '/@/store/modules/app';
// import { appStore } from '/@/store/modules/app';
import { useMessage } from '/@/hooks/web/useMessage';
import { useSetting } from '/@/hooks/core/useSetting';
import Button from '/@/components/Button/index.vue';
export default defineComponent({
components: { BasicDragVerify, AButton: Button },
components: {
// BasicDragVerify,
AButton: Button,
ACheckbox: Checkbox,
},
setup() {
const formRef = ref<any>(null);
const autoLoginRef = ref(false);
// const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
const { globSetting } = useSetting();
const { notification } = useMessage();
const formRef = ref<any>(null);
const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
// const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
const formData = reactive({
account: 'vben',
password: '123456',
verify: undefined,
// verify: undefined,
});
const formState = reactive({
loading: false,
......@@ -72,15 +103,15 @@
const formRules = reactive({
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
// verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
});
function resetVerify() {
const verify = unref(verifyRef);
if (!verify) return;
formData.verify && verify.$.resume();
formData.verify = undefined;
}
// function resetVerify() {
// const verify = unref(verifyRef);
// if (!verify) return;
// formData.verify && verify.$.resume();
// formData.verify = undefined;
// }
async function handleLogin() {
const form = unref(formRef);
......@@ -103,19 +134,20 @@
}
} catch (error) {
} finally {
resetVerify();
// resetVerify();
formState.loading = false;
}
}
return {
formRef,
verifyRef,
// verifyRef,
formData,
formState,
formRules,
login: handleLogin,
openLoginVerify: openLoginVerifyRef,
autoLogin: autoLoginRef,
// openLoginVerify: openLoginVerifyRef,
title: globSetting && globSetting.title,
};
},
......@@ -141,13 +173,13 @@
}
&-form {
width: 100%;
width: 520px;
background: @white;
border: 10px solid rgba(255, 255, 255, 0.5);
border-width: 8px;
border-radius: 4px;
background-clip: padding-box;
.respond-to(xlarge, { margin: 0 56px});
.respond-to(xlarge, { margin: 0 120px 0 50px});
&-wrap {
position: absolute;
......@@ -155,14 +187,14 @@
right: 0;
display: flex;
width: 100%;
height: 100%;
height: 90%;
justify-content: center;
align-items: center;
.respond-to(large, {
width: 520px;
right: calc(50% - 260px);
width: 600px;
right: calc(50% - 300px);
});
.respond-to(xlarge, { width: 520px; right:0});
.respond-to(xlarge, { width: 600px; right:0});
}
&__content {
......@@ -178,13 +210,13 @@
img {
display: inline-block;
width: 64px;
width: 48px;
}
h1 {
margin-bottom: 0;
font-size: 24px;
color: @primary-color;
// color: @primary-color;
text-align: center;
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册