mirror of
https://github.com/vbenjs/vben-admin-thin-next.git
synced 2025-01-24 02:00:22 +08:00
chore: changed login cache from sessionStorage to LocalStorage
This commit is contained in:
parent
4f98978eda
commit
c8021ef325
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user