chore: changed login cache from sessionStorage to LocalStorage

CHANGELOG.zh_CN.md

@@ -4,6 +4,10 @@
 
 - 全局 loading 添加文本
 
+### 🎫 Chores
+
+- 登录缓存从 sessionStorage 改为 LocalStorage
+
 ### ⚡ Performance Improvements
 
 - Layout 界面布局样式调整

src/setup/ant-design-vue/index.ts

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

src/store/modules/user.ts

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

src/utils/helper/persistent.ts

@@ -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) {

src/views/sys/login/Login.vue

@@ -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;
           }
         }