perf: 优化免登录功能，用户可选择免登录的天数

locales/en.yaml

@@ -116,8 +116,8 @@ login:
   username: Username
   password: Password
   verifyCode: VerifyCode
-  remember: No need to login for 7 days
-  rememberInfo: After checking and logging in, you will automatically log in to the system without entering your username and password within 7 days
+  remember: days no need to login
+  rememberInfo: After checking and logging in, will automatically log in to the system without entering your username and password within the specified number of days.
   sure: Sure Password
   forget: Forget Password?
   login: Login

locales/zh-CN.yaml

@@ -116,8 +116,8 @@ login:
   username: 账号
   password: 密码
   verifyCode: 验证码
-  remember: 7天内免登录
-  rememberInfo: 勾选并登录后，7天内无需输入用户名和密码会自动登入系统
+  remember: 天内免登录
+  rememberInfo: 勾选并登录后，规定天数内无需输入用户名和密码会自动登入系统
   sure: 确认密码
   forget: 忘记密码?
   login: 登录

src/store/modules/types.ts

@@ -42,4 +42,5 @@ export type userType = {
   verifyCode?: string;
   currentPage?: number;
   isRemembered?: boolean;
+  loginDay?: number;
 };

src/store/modules/user.ts

@@ -20,8 +20,10 @@ export const useUserStore = defineStore({
     verifyCode: "",
     // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
     currentPage: 0,
-    // 是否勾选了7天内免登录
-    isRemembered: false
+    // 是否勾选了登录页的免登录
+    isRemembered: false,
+    // 登录页的免登录存储几天，默认7天
+    loginDay: 7
   }),
   actions: {
     /** 存储用户名 */
@@ -40,10 +42,14 @@ export const useUserStore = defineStore({
     SET_CURRENTPAGE(value: number) {
       this.currentPage = value;
     },
-    /** 存储是否勾选了7天内免登录 */
+    /** 存储是否勾选了登录页的免登录 */
     SET_ISREMEMBERED(bool: boolean) {
       this.isRemembered = bool;
     },
+    /** 设置登录页的免登录存储几天 */
+    SET_LOGINDAY(value: number) {
+      this.loginDay = Number(value);
+    },
     /** 登入 */
     async loginByUsername(data) {
       return new Promise<UserResult>((resolve, reject) => {

src/utils/auth.ts

@@ -42,6 +42,7 @@ export function getToken(): DataInfo<number> {
 export function setToken(data: DataInfo<Date>) {
   let expires = 0;
   const { accessToken, refreshToken } = data;
+  const { isRemembered, loginDay } = useUserStoreHook();
   expires = new Date(data.expires).getTime(); // 如果后端直接设置时间戳，将此处代码改为expires = data.expires，然后把上面的DataInfo<Date>改成DataInfo<number>即可
   const cookieString = JSON.stringify({ accessToken, expires });
 
@@ -54,9 +55,9 @@ export function setToken(data: DataInfo<Date>) {
   Cookies.set(
     multipleTabsKey,
     "true",
-    useUserStoreHook().isRemembered
+    isRemembered
       ? {
-          expires: 7
+          expires: loginDay
         }
       : {}
   );

src/views/login/index.vue

@@ -44,6 +44,7 @@ defineOptions({
 });
 
 const imgCode = ref("");
+const loginDay = ref(7);
 const router = useRouter();
 const loading = ref(false);
 const checked = ref(false);
@@ -111,6 +112,9 @@ watch(imgCode, value => {
 watch(checked, bool => {
   useUserStoreHook().SET_ISREMEMBERED(bool);
 });
+watch(loginDay, value => {
+  useUserStoreHook().SET_LOGINDAY(value);
+});
 </script>
 
 <template>
@@ -230,6 +234,19 @@ watch(checked, bool => {
                 <div class="w-full h-[20px] flex justify-between items-center">
                   <el-checkbox v-model="checked">
                     <span class="flex">
+                      <select
+                        v-model="loginDay"
+                        :style="{
+                          width: loginDay < 10 ? '10px' : '16px',
+                          outline: 'none',
+                          background: 'none',
+                          appearance: 'none'
+                        }"
+                      >
+                        <option value="1">1</option>
+                        <option value="7">7</option>
+                        <option value="30">30</option>
+                      </select>
                       {{ t("login.remember") }}
                       <el-tooltip
                         effect="dark"