feat: 支持多标签页打开已经登录的系统后无需再登录并添加7天内免登录功能 (#747)

* feat: 支持多标签页打开已经登录的系统后无需再登录 * feat: 添加`7`天内免登录功能
2026-01-20 16:53:37 +08:00 · 2023-10-07 15:00:03 +08:00
parent be2de405ab
commit 7e7b6fee7a
12 changed files with 131 additions and 93 deletions
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -8,13 +8,6 @@ import {
  nextTick,
  onBeforeMount
 } from "vue";
-import {
-  useDark,
-  debounce,
-  useGlobal,
-  storageLocal,
-  storageSession
-} from "@pureadmin/utils";
 import { getConfig } from "@/config";
 import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
@@ -27,6 +20,7 @@ import { useAppStoreHook } from "@/store/modules/app";
 import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import { useDark, debounce, useGlobal, storageLocal } from "@pureadmin/utils";

 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
@@ -133,7 +127,6 @@ const multiTagsCacheChange = () => {
 function onReset() {
  removeToken();
  storageLocal().clear();
-  storageSession().clear();
  const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
  useAppStoreHook().setLayout(Layout);
  setEpThemeColor(EpThemeColor);
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,16 +1,13 @@
 import "@/utils/sso";
+import Cookies from "js-cookie";
 import { getConfig } from "@/config";
 import NProgress from "@/utils/progress";
 import { transformI18n } from "@/plugins/i18n";
-import { sessionKey, type DataInfo } from "@/utils/auth";
+import { buildHierarchyTree } from "@/utils/tree";
+import remainingRouter from "./modules/remaining";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { usePermissionStoreHook } from "@/store/modules/permission";
-import {
-  Router,
-  createRouter,
-  RouteRecordRaw,
-  RouteComponent
-} from "vue-router";
+import { isUrl, openLink, storageLocal, isAllEmpty } from "@pureadmin/utils";
 import {
  ascending,
  getTopMenu,
@@ -22,10 +19,18 @@ import {
  formatTwoStageRoutes,
  formatFlatteningRoutes
 } from "./utils";
-import { buildHierarchyTree } from "@/utils/tree";
-import { isUrl, openLink, storageSession, isAllEmpty } from "@pureadmin/utils";
-
-import remainingRouter from "./modules/remaining";
+import {
+  Router,
+  createRouter,
+  RouteRecordRaw,
+  RouteComponent
+} from "vue-router";
+import {
+  type DataInfo,
+  userKey,
+  removeToken,
+  multipleTabsKey
+} from "@/utils/auth";

 /** 自动导入全部静态路由，无需再手动引入！匹配 src/router/modules 目录（任何嵌套级别）中具有 .ts 扩展名的所有文件，除了 remaining.ts 文件
 * 如何匹配所有文件请看：https://github.com/mrmlnc/fast-glob#basic-syntax
@@ -109,7 +114,7 @@ router.beforeEach((to: ToRouteType, _from, next) => {
      handleAliveRoute(to);
    }
  }
-  const userInfo = storageSession().getItem<DataInfo<number>>(sessionKey);
+  const userInfo = storageLocal().getItem<DataInfo<number>>(userKey);
  NProgress.start();
  const externalLink = isUrl(to?.name as string);
  if (!externalLink) {
@@ -125,7 +130,7 @@ router.beforeEach((to: ToRouteType, _from, next) => {
  function toCorrectRoute() {
    whiteList.includes(to.fullPath) ? next(_from.fullPath) : next();
  }
-  if (userInfo) {
+  if (Cookies.get(multipleTabsKey) && userInfo) {
    // 无权限跳转403页面
    if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
      next({ path: "/error/403" });
@@ -187,6 +192,7 @@ router.beforeEach((to: ToRouteType, _from, next) => {
      if (whiteList.indexOf(to.path) !== -1) {
        next();
      } else {
+        removeToken();
        next({ path: "/login" });
      }
    } else {
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -13,13 +13,13 @@ import {
  cloneDeep,
  isAllEmpty,
  intersection,
-  storageSession,
+  storageLocal,
  isIncludeAllChildren
 } from "@pureadmin/utils";
 import { getConfig } from "@/config";
 import { menuType } from "@/layout/types";
 import { buildHierarchyTree } from "@/utils/tree";
-import { sessionKey, type DataInfo } from "@/utils/auth";
+import { userKey, type DataInfo } from "@/utils/auth";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 const IFrame = () => import("@/layout/frameView.vue");
@@ -81,10 +81,10 @@ function isOneOfArray(a: Array<string>, b: Array<string>) {
    : true;
 }

-/** 从sessionStorage里取出当前登陆用户的角色roles，过滤无权限的菜单 */
+/** 从localStorage里取出当前登陆用户的角色roles，过滤无权限的菜单 */
 function filterNoPermissionTree(data: RouteComponent[]) {
  const currentRoles =
-    storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
+    storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
  const newTree = cloneDeep(data).filter((v: any) =>
    isOneOfArray(v.meta?.roles, currentRoles)
  );
@@ -184,9 +184,9 @@ function handleAsyncRoutes(routeList) {
 /** 初始化路由（`new Promise` 写法防止在异步请求中造成无限循环）*/
 function initRouter() {
  if (getConfig()?.CachingAsyncRoutes) {
-    // 开启动态路由缓存本地sessionStorage
+    // 开启动态路由缓存本地localStorage
    const key = "async-routes";
-    const asyncRouteList = storageSession().getItem(key) as any;
+    const asyncRouteList = storageLocal().getItem(key) as any;
    if (asyncRouteList && asyncRouteList?.length > 0) {
      return new Promise(resolve => {
        handleAsyncRoutes(asyncRouteList);
@@ -196,7 +196,7 @@ function initRouter() {
      return new Promise(resolve => {
        getAsyncRoutes().then(({ data }) => {
          handleAsyncRoutes(cloneDeep(data));
-          storageSession().setItem(key, data);
+          storageLocal().setItem(key, data);
          resolve(router);
        });
      });
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -41,4 +41,5 @@ export type userType = {
  roles?: Array<string>;
  verifyCode?: string;
  currentPage?: number;
+  isRemembered?: boolean;
 };
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -3,24 +3,25 @@ import { store } from "@/store";
 import { userType } from "./types";
 import { routerArrays } from "@/layout/types";
 import { router, resetRouter } from "@/router";
-import { storageSession } from "@pureadmin/utils";
+import { storageLocal } from "@pureadmin/utils";
 import { getLogin, refreshTokenApi } from "@/api/user";
 import { UserResult, RefreshTokenResult } from "@/api/user";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { type DataInfo, setToken, removeToken, sessionKey } from "@/utils/auth";
+import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";

 export const useUserStore = defineStore({
  id: "pure-user",
  state: (): userType => ({
    // 用户名
-    username:
-      storageSession().getItem<DataInfo<number>>(sessionKey)?.username ?? "",
+    username: storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "",
    // 页面级别权限
-    roles: storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [],
+    roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
    // 前端生成的验证码（按实际需求替换）
    verifyCode: "",
    // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
-    currentPage: 0
+    currentPage: 0,
+    // 是否勾选了7天内免登录
+    isRemembered: false
  }),
  actions: {
    /** 存储用户名 */
@@ -39,6 +40,10 @@ export const useUserStore = defineStore({
    SET_CURRENTPAGE(value: number) {
      this.currentPage = value;
    },
+    /** 存储是否勾选了7天内免登录 */
+    SET_ISREMEMBERED(bool: boolean) {
+      this.isRemembered = bool;
+    },
    /** 登入 */
    async loginByUsername(data) {
      return new Promise<UserResult>((resolve, reject) => {
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,5 +1,5 @@
 import Cookies from "js-cookie";
-import { storageSession } from "@pureadmin/utils";
+import { storageLocal } from "@pureadmin/utils";
 import { useUserStoreHook } from "@/store/modules/user";

 export interface DataInfo<T> {
@@ -15,22 +15,29 @@ export interface DataInfo<T> {
  roles?: Array<string>;
 }

-export const sessionKey = "user-info";
+export const userKey = "user-info";
 export const TokenKey = "authorized-token";
+/**
+ * 通过`multiple-tabs`是否在`cookie`中，判断用户是否已经登录系统，
+ * 从而支持多标签页打开已经登录的系统后无需再登录。
+ * 浏览器完全关闭后`multiple-tabs`将自动从`cookie`中销毁，
+ * 再次打开浏览器需要重新登录系统
+ * */
+export const multipleTabsKey = "multiple-tabs";

 /** 获取`token` */
 export function getToken(): DataInfo<number> {
  // 此处与`TokenKey`相同，此写法解决初始化时`Cookies`中不存在`TokenKey`报错
  return Cookies.get(TokenKey)
    ? JSON.parse(Cookies.get(TokenKey))
-    : storageSession().getItem(sessionKey);
+    : storageLocal().getItem(userKey);
 }

 /**
 * @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
 * 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
 * 将`accessToken`、`expires`这两条信息放在key值为authorized-token的cookie里（过期自动销毁）
- * 将`username`、`roles`、`refreshToken`、`expires`这四条信息放在key值为`user-info`的sessionStorage里（浏览器关闭自动销毁）
+ * 将`username`、`roles`、`refreshToken`、`expires`这四条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
 */
 export function setToken(data: DataInfo<Date>) {
  let expires = 0;
@@ -44,10 +51,20 @@ export function setToken(data: DataInfo<Date>) {
      })
    : Cookies.set(TokenKey, cookieString);

-  function setSessionKey(username: string, roles: Array<string>) {
+  Cookies.set(
+    multipleTabsKey,
+    "true",
+    useUserStoreHook().isRemembered
+      ? {
+          expires: 7
+        }
+      : {}
+  );
+
+  function setUserKey(username: string, roles: Array<string>) {
    useUserStoreHook().SET_USERNAME(username);
    useUserStoreHook().SET_ROLES(roles);
-    storageSession().setItem(sessionKey, {
+    storageLocal().setItem(userKey, {
      refreshToken,
      expires,
      username,
@@ -57,20 +74,21 @@ export function setToken(data: DataInfo<Date>) {

  if (data.username && data.roles) {
    const { username, roles } = data;
-    setSessionKey(username, roles);
+    setUserKey(username, roles);
  } else {
    const username =
-      storageSession().getItem<DataInfo<number>>(sessionKey)?.username ?? "";
+      storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "";
    const roles =
-      storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
-    setSessionKey(username, roles);
+      storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
+    setUserKey(username, roles);
  }
 }

-/** 删除`token`以及key值为`user-info`的session信息 */
+/** 删除`token`以及key值为`user-info`的localStorage信息 */
 export function removeToken() {
  Cookies.remove(TokenKey);
-  sessionStorage.clear();
+  Cookies.remove(multipleTabsKey);
+  storageLocal().removeItem(userKey);
 }

 /** 格式化token（jwt格式） */
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -37,6 +37,7 @@ import globalization from "@/assets/svg/globalization.svg?component";
 import Lock from "@iconify-icons/ri/lock-fill";
 import Check from "@iconify-icons/ep/check";
 import User from "@iconify-icons/ri/user-3-fill";
+import Info from "@iconify-icons/ri/information-line";

 defineOptions({
  name: "Login"
@@ -107,6 +108,9 @@ onBeforeUnmount(() => {
 watch(imgCode, value => {
  useUserStoreHook().SET_VERIFYCODE(value);
 });
+watch(checked, bool => {
+  useUserStoreHook().SET_ISREMEMBERED(bool);
+});
 </script>

 <template>
@@ -225,7 +229,16 @@ watch(imgCode, value => {
              <el-form-item>
                <div class="w-full h-[20px] flex justify-between items-center">
                  <el-checkbox v-model="checked">
-                    {{ t("login.remember") }}
+                    <span class="flex">
+                      {{ t("login.remember") }}
+                      <el-tooltip
+                        effect="dark"
+                        placement="top"
+                        :content="t('login.rememberInfo')"
+                      >
+                        <IconifyIconOffline :icon="Info" class="ml-1" />
+                      </el-tooltip>
+                    </span>
                  </el-checkbox>
                  <el-button
                    link
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { initRouter } from "@/router/utils";
-import { storageSession } from "@pureadmin/utils";
+import { storageLocal } from "@pureadmin/utils";
 import { type CSSProperties, ref, computed } from "vue";
 import { useUserStoreHook } from "@/store/modules/user";
 import { usePermissionStoreHook } from "@/store/modules/permission";
@@ -34,7 +34,7 @@ function onChange() {
    .loginByUsername({ username: username.value, password: "admin123" })
    .then(res => {
      if (res.success) {
-        storageSession().removeItem("async-routes");
+        storageLocal().removeItem("async-routes");
        usePermissionStoreHook().clearAllCachePage();
        initRouter();
      }