canrd-outside / order-erp-front · Commits

Commit c8021ef3253765059b0aacb955158642072640c5

Authored by vben
1 parent 4f98978e

chore: changed login cache from sessionStorage to LocalStorage

Inline Side-by-side
Showing 5 changed files with 87 additions and 43 deletions
CHANGELOG.zh_CN.md
  View file @c8021ef
... ... @@ -4,6 +4,10 @@
4 4  
5 5 - 全局 loading 添加文本
6 6  
  7 +### 🎫 Chores
  8 +
  9 +- 登录缓存从 sessionStorage 改为 LocalStorage
  10 +
7 11 ### ⚡ Performance Improvements
8 12  
9 13 - Layout 界面布局样式调整
... ...
src/setup/ant-design-vue/index.ts
  View file @c8021ef
... ... @@ -2,7 +2,7 @@
2 2  
3 3 import type { App } from 'vue';
4 4  
5   -import { Form, Input } from 'ant-design-vue';
  5 +import { Form, Input, Row, Col } from 'ant-design-vue';
6 6 import 'ant-design-vue/dist/antd.less';
7 7  
8 8 import './spin';
... ... @@ -11,4 +11,6 @@ export function setupAntd(app: App<Element>) {
11 11 // 这两个组件在登录也就用。全局注册
12 12 app.use(Form);
13 13 app.use(Input);
  14 + app.use(Row);
  15 + app.use(Col);
14 16 }
... ...
src/store/modules/user.ts
  View file @c8021ef
... ... @@ -21,7 +21,7 @@ import { tabStore } from './tab';
21 21  
22 22 import { loginApi, getUserInfoById } from '/@/api/sys/user';
23 23  
24   -import { setSession, getSession, clearSession, clearLocal } from '/@/utils/helper/persistent';
  24 +import { setLocal, getLocal, clearSession, clearLocal } from '/@/utils/helper/persistent';
25 25 // import { FULL_PAGE_NOT_FOUND_ROUTE } from '/@/router/constant';
26 26  
27 27 export type UserInfo = Omit<GetUserInfoByUserIdModel, 'roles'>;
... ... @@ -40,17 +40,15 @@ class User extends VuexModule {
40 40 private roleListState: RoleEnum[] = [];
41 41  
42 42 get getUserInfoState(): UserInfo {
43   - return this.userInfoState || (getSession(USER_INFO_KEY) as UserInfo) || {};
  43 + return this.userInfoState || (getLocal(USER_INFO_KEY) as UserInfo) || {};
44 44 }
45 45  
46 46 get getTokenState(): string {
47   - return this.tokenState || (getSession(TOKEN_KEY) as string);
  47 + return this.tokenState || (getLocal(TOKEN_KEY) as string);
48 48 }
49 49  
50 50 get getRoleListState(): RoleEnum[] {
51   - return this.roleListState.length > 0
52   - ? this.roleListState
53   - : (getSession(ROLES_KEY) as RoleEnum[]);
  51 + return this.roleListState.length > 0 ? this.roleListState : (getLocal(ROLES_KEY) as RoleEnum[]);
54 52 }
55 53  
56 54 @Mutation
... ... @@ -64,7 +62,7 @@ class User extends VuexModule {
64 62 commitUserInfoState(info: UserInfo): void {
65 63 this.userInfoState = info;
66 64 if (info) {
67   - setSession(USER_INFO_KEY, info);
  65 + setLocal(USER_INFO_KEY, info, true);
68 66 }
69 67 }
70 68  
... ... @@ -72,7 +70,7 @@ class User extends VuexModule {
72 70 commitRoleListState(roleList: RoleEnum[]): void {
73 71 this.roleListState = roleList;
74 72 if (roleList) {
75   - setSession(ROLES_KEY, roleList);
  73 + setLocal(ROLES_KEY, roleList, true);
76 74 }
77 75 }
78 76  
... ... @@ -80,7 +78,7 @@ class User extends VuexModule {
80 78 commitTokenState(info: string): void {
81 79 this.tokenState = info;
82 80 if (info) {
83   - setSession(TOKEN_KEY, info);
  81 + setLocal(TOKEN_KEY, info, true);
84 82 }
85 83 }
86 84  
... ...
src/utils/helper/persistent.ts
  View file @c8021ef
... ... @@ -27,9 +27,13 @@ function initCache() {
27 27 }
28 28 initCache();
29 29  
30   -export function setLocal(key: string, value: any) {
  30 +export function setLocal(key: string, value: any, immediate = false) {
31 31 cacheStore.local[BASE_LOCAL_CACHE_KEY] = cacheStore.local[BASE_LOCAL_CACHE_KEY] || {};
32 32 cacheStore.local[BASE_LOCAL_CACHE_KEY][key] = value;
  33 + if (immediate) {
  34 + const localCache = cacheStore.local;
  35 + ls.set(BASE_LOCAL_CACHE_KEY, localCache);
  36 + }
33 37 }
34 38  
35 39 export function getLocal<T>(key: string): T | null {
... ... @@ -49,9 +53,13 @@ export function clearLocal() {
49 53 cacheStore.local = {};
50 54 }
51 55  
52   -export function setSession(key: string, value: any) {
  56 +export function setSession(key: string, value: any, immediate = false) {
53 57 cacheStore.session[BASE_SESSION_CACHE_KEY] = cacheStore.session[BASE_SESSION_CACHE_KEY] || {};
54 58 cacheStore.session[BASE_SESSION_CACHE_KEY][key] = value;
  59 + if (immediate) {
  60 + const cache = cacheStore.session;
  61 + ls.set(BASE_SESSION_CACHE_KEY, cache);
  62 + }
55 63 }
56 64  
57 65 export function removeSession(key: string) {
... ...
src/views/sys/login/Login.vue
  View file @c8021ef
... ... @@ -11,19 +11,34 @@
11 11  
12 12 <a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
13 13 <a-form-item name="account">
14   - <a-input size="large" v-model:value="formData.account" placeholder="vben" />
  14 + <a-input size="large" v-model:value="formData.account" placeholder="Username: vben" />
15 15 </a-form-item>
16 16 <a-form-item name="password">
17 17 <a-input-password
18 18 size="large"
19 19 visibilityToggle
20 20 v-model:value="formData.password"
21   - placeholder="123456"
  21 + placeholder="Password: 123456"
22 22 />
23 23 </a-form-item>
24   - <a-form-item name="verify" v-if="openLoginVerify">
  24 +
  25 + <!-- <a-form-item name="verify" v-if="openLoginVerify">
25 26 <BasicDragVerify v-model:value="formData.verify" ref="verifyRef" />
26   - </a-form-item>
  27 + </a-form-item> -->
  28 + <a-row>
  29 + <a-col :span="12">
  30 + <a-form-item>
  31 + <!-- 未做逻辑，需要自行处理 -->
  32 + <a-checkbox v-model:checked="autoLogin" size="small">自动登录</a-checkbox>
  33 + </a-form-item>
  34 + </a-col>
  35 + <a-col :span="12">
  36 + <a-form-item :style="{ 'text-align': 'right' }">
  37 + <!-- 未做逻辑，需要自行处理 -->
  38 + <a-button type="link" size="small">忘记密码</a-button>
  39 + </a-form-item>
  40 + </a-col>
  41 + </a-row>
27 42 <a-form-item>
28 43 <a-button
29 44 type="primary"
... ... @@ -42,28 +57,44 @@
42 57 </div>
43 58 </template>
44 59 <script lang="ts">
45   - import { defineComponent, reactive, ref, unref, toRaw, computed } from 'vue';
46   - import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
  60 + import {
  61 + defineComponent,
  62 + reactive,
  63 + ref,
  64 + unref,
  65 + toRaw,
  66 + // computed
  67 + } from 'vue';
  68 + import { Checkbox } from 'ant-design-vue';
  69 +
  70 + import Button from '/@/components/Button/index.vue';
  71 + // import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
  72 +
47 73 import { userStore } from '/@/store/modules/user';
48   - import { appStore } from '/@/store/modules/app';
  74 + // import { appStore } from '/@/store/modules/app';
49 75 import { useMessage } from '/@/hooks/web/useMessage';
50 76 import { useSetting } from '/@/hooks/core/useSetting';
51   - import Button from '/@/components/Button/index.vue';
52 77  
53 78 export default defineComponent({
54   - components: { BasicDragVerify, AButton: Button },
  79 + components: {
  80 + // BasicDragVerify,
  81 + AButton: Button,
  82 + ACheckbox: Checkbox,
  83 + },
55 84 setup() {
  85 + const formRef = ref<any>(null);
  86 + const autoLoginRef = ref(false);
  87 + // const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
  88 +
56 89 const { globSetting } = useSetting();
57 90 const { notification } = useMessage();
58   - const formRef = ref<any>(null);
59   - const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
60 91  
61   - const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
  92 + // const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
62 93  
63 94 const formData = reactive({
64 95 account: 'vben',
65 96 password: '123456',
66   - verify: undefined,
  97 + // verify: undefined,
67 98 });
68 99 const formState = reactive({
69 100 loading: false,
... ... @@ -72,15 +103,15 @@
72 103 const formRules = reactive({
73 104 account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
74 105 password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
75   - verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
  106 + // verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
76 107 });
77 108  
78   - function resetVerify() {
79   - const verify = unref(verifyRef);
80   - if (!verify) return;
81   - formData.verify && verify.$.resume();
82   - formData.verify = undefined;
83   - }
  109 + // function resetVerify() {
  110 + // const verify = unref(verifyRef);
  111 + // if (!verify) return;
  112 + // formData.verify && verify.$.resume();
  113 + // formData.verify = undefined;
  114 + // }
84 115  
85 116 async function handleLogin() {
86 117 const form = unref(formRef);
... ... @@ -103,19 +134,20 @@
103 134 }
104 135 } catch (error) {
105 136 } finally {
106   - resetVerify();
  137 + // resetVerify();
107 138 formState.loading = false;
108 139 }
109 140 }
110 141  
111 142 return {
112 143 formRef,
113   - verifyRef,
  144 + // verifyRef,
114 145 formData,
115 146 formState,
116 147 formRules,
117 148 login: handleLogin,
118   - openLoginVerify: openLoginVerifyRef,
  149 + autoLogin: autoLoginRef,
  150 + // openLoginVerify: openLoginVerifyRef,
119 151 title: globSetting && globSetting.title,
120 152 };
121 153 },
... ... @@ -141,13 +173,13 @@
141 173 }
142 174  
143 175 &-form {
144   - width: 100%;
  176 + width: 520px;
145 177 background: @white;
146 178 border: 10px solid rgba(255, 255, 255, 0.5);
147 179 border-width: 8px;
148 180 border-radius: 4px;
149 181 background-clip: padding-box;
150   - .respond-to(xlarge, { margin: 0 56px});
  182 + .respond-to(xlarge, { margin: 0 120px 0 50px});
151 183  
152 184 &-wrap {
153 185 position: absolute;
... ... @@ -155,14 +187,14 @@
155 187 right: 0;
156 188 display: flex;
157 189 width: 100%;
158   - height: 100%;
  190 + height: 90%;
159 191 justify-content: center;
160 192 align-items: center;
161 193 .respond-to(large, {
162   - width: 520px;
163   - right: calc(50% - 260px);
  194 + width: 600px;
  195 + right: calc(50% - 300px);
164 196 });
165   - .respond-to(xlarge, { width: 520px; right:0});
  197 + .respond-to(xlarge, { width: 600px; right:0});
166 198 }
167 199  
168 200 &__content {
... ... @@ -178,13 +210,13 @@
178 210  
179 211 img {
180 212 display: inline-block;
181   - width: 64px;
  213 + width: 48px;
182 214 }
183 215  
184 216 h1 {
185 217 margin-bottom: 0;
186 218 font-size: 24px;
187   - color: @primary-color;
  219 + // color: @primary-color;
188 220 text-align: center;
189 221 }
190 222 }
... ...