feat: add device session protection and logout flow

Author: JoaHuang

package.json

@@ -64,6 +64,7 @@
     "@solid-primitives/keyboard": "^1.2.5",
     "@solid-primitives/storage": "^1.3.1",
     "@stitches/core": "^1.2.8",
+    "@types/uuid": "^10.0.0",
     "@viselect/vanilla": "^3.5.0",
     "aplayer": "^1.10.1",
     "artplayer": "^5.2.2",
@@ -96,7 +97,8 @@
     "solid-markdown": "^1.2.0",
     "solid-transition-group": "^0.0.12",
     "streamsaver": "^2.0.6",
-    "typescript-natural-sort": "^0.7.2"
+    "typescript-natural-sort": "^0.7.2",
+    "uuid": "^11.1.0"
   },
   "lint-staged": {
     "**/*": "prettier --write"

pnpm-lock.yaml

@@ -48,10 +48,24 @@ export const Error = (props: {
     )
   }
 
+  // 检查是否是设备数上限错误
+  const isTooManyDevicesError = () => {
+    return props.msg.includes("too many active devices")
+  }
+
+  // 检查是否是会话失效错误
+  const isSessionInactiveError = () => {
+    return props.msg.includes("session inactive")
+  }
+
   const handleGoToStorages = () => {
     to("/@manage/storages")
   }
 
+  const handleGoToLogin = () => {
+    to(`/@login?redirect=${encodeURIComponent(window.location.pathname)}`)
+  }
+
   return (
     <Center h={merged.h} p="$2" flexDirection="column">
       <Box
@@ -61,20 +75,37 @@ export const Error = (props: {
         bgColor={useColorModeValue("white", "$neutral3")()}
       >
         <VStack spacing="$4" textAlign="center">
-          <Heading
-            css={{
-              wordBreak: "break-all",
-            }}
-          >
-            {props.msg}
-          </Heading>
+          <Show when={!isTooManyDevicesError() && !isSessionInactiveError()}>
+            <Heading
+              css={{
+                wordBreak: "break-all",
+              }}
+            >
+              {props.msg}
+            </Heading>
+          </Show>
 
           <Show when={isStorageError()}>
             <Button onClick={handleGoToStorages} size="md">
               {t("home.go_to_storages")}
             </Button>
           </Show>
 
+          <Show when={isTooManyDevicesError()}>
+            <VStack spacing="$2">
+              <Text fontSize="sm">{t("session.too_many_devices")}</Text>
+            </VStack>
+          </Show>
+
+          <Show when={isSessionInactiveError()}>
+            <VStack spacing="$2">
+              <Text fontSize="sm">{t("session.session_inactive")}</Text>
+              <Button onClick={handleGoToLogin} size="md" colorScheme="accent">
+                {t("global.go_login")}
+              </Button>
+            </VStack>
+          </Show>
+
           <Show when={!props.disableColor}>
             <Flex mt="$2" justifyContent="end">
               <SwitchColorMode />

src/components/Base.tsx

@@ -8,6 +8,9 @@
     "global": "Global",
     "other": "Other",
     "users": "Users",
+    "session": "Session",
+    "my_session": "My Session",
+    "session_management": "Management",
     "storages": "Storages",
     "metas": "Metas",
     "labels": "Labels",

src/lang/en/manage.json

@@ -0,0 +1,17 @@
+{
+  "device_id": "Device ID",
+  "user_id": "User ID",
+  "system_info": "System Info",
+  "ip": "IP",
+  "last_active": "Last Active",
+  "status": "Status",
+  "active": "Active",
+  "offline": "Offline",
+  "kick_out": "Kick Out",
+  "kick_out_confirm": "Are you sure you want to kick out this session?",
+  "kick_out_success": "Session kicked out successfully",
+  "kick_out_failed": "Failed to kick out session",
+  "kick_out_current_session": "Current session has been kicked out. Please log in again.",
+  "too_many_devices": "Device limit reached. Please contact administrator to kick out other devices in 'My Sessions'.",
+  "session_inactive": "Current session has been invalidated. Please log in again."
+}

src/lang/en/session.json

@@ -51,9 +51,9 @@ export const cols: Col[] = [
   {
     name: "size",
     textAlign: "right",
-    w: { "@initial": "100px", "@md": "12%" },
+    w: { "@initial": "100px", "@md": "30%" },
   },
-  { name: "modified", textAlign: "right", w: { "@initial": 0, "@md": "20%" } },
+  { name: "modified", textAlign: "right", w: { "@initial": 0, "@md": "25%" } },
 ]
 
 // 添加选中统计组件

src/pages/home/folder/ListItem.tsx

@@ -105,7 +105,7 @@ const Login = () => {
   })
 
   const [loading, data] = useFetch(
-    async (): Promise<Resp<{ token: string }>> => {
+    async (): Promise<Resp<{ token: string; device_key?: string }>> => {
       if (useLdap()) {
         return r.post("/auth/login/ldap", {
           username: username(),
@@ -137,7 +137,7 @@ const Login = () => {
       credentials: AuthenticationPublicKeyCredential,
       username: string,
       signal: AbortSignal | undefined,
-    ): Promise<Resp<{ token: string }>> =>
+    ): Promise<Resp<{ token: string; device_key?: string }>> =>
       r.post(
         "/authn/webauthn_finish_login?username=" + username,
         JSON.stringify(credentials),
@@ -212,6 +212,19 @@ const Login = () => {
         handleRespWithoutNotify(resp, (data) => {
           notify.success(t("login.success"))
           changeToken(data.token)
+          // 保存 device_key 到 localStorage
+          if (data.device_key) {
+            localStorage.setItem("device_key", data.device_key)
+            console.log("=== Login Debug (Hash) ===")
+            console.log("Saved device_key:", data.device_key)
+            console.log("Full response data:", data)
+            console.log("========================")
+          } else {
+            console.log("=== Login Debug (Hash) ===")
+            console.log("No device_key in response")
+            console.log("Full response data:", data)
+            console.log("========================")
+          }
           to(
             decodeURIComponent(searchParams.redirect || base_path || "/"),
             true,
@@ -272,6 +285,19 @@ const Login = () => {
           (data) => {
             notify.success(t("login.success"))
             changeToken(data.token)
+            // 保存 device_key 到 localStorage
+            if (data.device_key) {
+              localStorage.setItem("device_key", data.device_key)
+              console.log("=== Login Debug ===")
+              console.log("Saved device_key:", data.device_key)
+              console.log("Full response data:", data)
+              console.log("==================")
+            } else {
+              console.log("=== Login Debug ===")
+              console.log("No device_key in response")
+              console.log("Full response data:", data)
+              console.log("==================")
+            }
             to(
               decodeURIComponent(searchParams.redirect || base_path || "/"),
               true,

src/pages/login/index.tsx

@@ -20,7 +20,8 @@ import { SwitchColorMode, SwitchLanguageWhite } from "~/components"
 import { useFetch, useRouter, useT } from "~/hooks"
 import { SideMenu } from "./SideMenu"
 import { side_menu_items } from "./sidemenu_items"
-import { changeToken, handleResp, notify, r } from "~/utils"
+import { handleResp, notify, r } from "~/utils"
+import { clearUserData } from "~/utils/auth"
 import { PResp } from "~/types"
 const { isOpen, onOpen, onClose } = createDisclosure()
 const [logOutReqLoading, logOutReq] = useFetch(
@@ -32,7 +33,7 @@ const Header = () => {
   const { to } = useRouter()
   const logOut = async () => {
     handleResp(await logOutReq(), () => {
-      changeToken()
+      clearUserData()
       notify.success(t("manage.logout_success"))
       to(`/@login?redirect=${encodeURIComponent(location.pathname)}`)
     })

src/pages/manage/Header.tsx

@@ -30,11 +30,24 @@ export interface SideMenuItemProps {
 
 const SideMenuItem = (props: SideMenuItemProps) => {
   const ifShow = createMemo(() => {
-    if (!UserMethods.is_admin(me())) {
-      if (props.role === undefined) return false
-      else if (props.role === UserRole.GENERAL && !UserMethods.is_general(me()))
+    // 使用层级权限检查
+    if (props.role !== undefined && !UserMethods.hasAccess(me(), props.role)) {
+      return false
+    }
+
+    // 如果有子菜单项，检查是否有可见的子菜单项
+    if (props.children) {
+      const hasVisibleChildren = props.children.some((child) => {
+        if (child.role !== undefined) {
+          return UserMethods.hasAccess(me(), child.role)
+        }
+        return true
+      })
+      if (!hasVisibleChildren) {
         return false
+      }
     }
+
     return true
   })
   return (
@@ -102,6 +115,18 @@ const SideMenuItemWithChildren = (props: SideMenuItemProps) => {
   const { pathname } = useRouter()
   const [open, setOpen] = createSignal(pathname().includes(props.to))
   const t = useT()
+
+  // 检查是否有可见的子菜单项
+  const hasVisibleChildren = createMemo(() => {
+    if (!props.children) return false
+    return props.children.some((child) => {
+      if (child.role !== undefined) {
+        return UserMethods.hasAccess(me(), child.role)
+      }
+      return true
+    })
+  })
+
   return (
     <Box w="$full">
       <Flex
@@ -135,7 +160,7 @@ const SideMenuItemWithChildren = (props: SideMenuItemProps) => {
           transition="transform 0.2s"
         />
       </Flex>
-      <Show when={open()}>
+      <Show when={open() && hasVisibleChildren()}>
         <Box pl="$2">
           <SideMenu items={props.children!} />
         </Box>

src/pages/manage/SideMenu.tsx

@@ -15,10 +15,12 @@ export interface DeletePopoverProps {
   loading: boolean
   onClick: () => void
   disabled?: boolean
+  buttonText?: string
 }
 export const DeletePopover = (props: DeletePopoverProps) => {
   const t = useT()
   const isDisabled = props.disabled ?? false // 默认值为 false
+  const buttonText = props.buttonText ?? t("global.delete") // 默认使用删除文本
   return (
     <Popover>
       {({ onClose }) => (
@@ -28,7 +30,7 @@ export const DeletePopover = (props: DeletePopoverProps) => {
             colorScheme="danger"
             disabled={isDisabled}
           >
-            {t("global.delete")}
+            {buttonText}
           </PopoverTrigger>
           <PopoverContent>
             <PopoverArrow />