chore: changed login cache from sessionStorage to LocalStorage

c8021ef3 · vben · 4f98978e · c8021ef3 · c8021ef3 · c8021ef3
5 changed file
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -4,6 +4,10 @@

 - 全局 loading 添加文本

+### 🎫 Chores
+
+- 登录缓存从 sessionStorage 改为 LocalStorage
+
 ### ⚡ Performance Improvements

 - Layout 界面布局样式调整

--- a/src/setup/ant-design-vue/index.ts
+++ b/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);
 }
--- a/src/store/modules/user.ts
+++ b/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);
    }
  }


--- a/src/utils/helper/persistent.ts
+++ b/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) {

--- a/src/views/sys/login/Login.vue
+++ b/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;
          }
        }