优化数据隔离，进行权限控制

app/routes/home.tsx

@@ -1,6 +1,6 @@
 // import React from 'react';
 import { type MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData, useNavigate, Form } from "@remix-run/react";
 import { Card } from "~/components/ui/Card";
 import { Button } from "~/components/ui/Button";
 import { FileTag, links as fileTagLinks } from "~/components/ui/FileTag";
@@ -11,6 +11,9 @@ import { getDocuments, type DocumentUI, type DocumentSearchParams } from "~/api/
 import { useState, useEffect } from "react";
 import { getHomeData } from "~/api/home/home";
 import dayjs from 'dayjs';
+import type { UserRole } from '~/root';
+import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
+import { logout, getUserSession } from "~/root";
 // import { getUserSession } from "~/root";
 
 // 文件处理状态选项
@@ -43,15 +46,11 @@ export const meta: MetaFunction = () => {
 // }
 
 // 添加认证检查
-export async function loader() {
-  // 检查用户登录状态
-  // const { isAuthenticated } = await getUserSession(request);
-  
-  // if (!isAuthenticated) {
-  //   return redirect("/login");
-  // }
-  
+export async function loader({ request }: LoaderFunctionArgs) {
   try {
+    // 从根loader获取用户角色
+    const { userRole } = await getUserSession(request);
+    
     // 返回默认值，实际数据将在客户端根据 sessionStorage 加载
     return Response.json({
       homeData: {
@@ -64,7 +63,8 @@ export async function loader() {
         issuesGrowth: { value: 0, isUp: true }
       },
       recentFiles: [],
-      reviewType: null
+      reviewType: null,
+      userRole: userRole
     });
   } catch (error) {
     // 错误处理
@@ -76,8 +76,21 @@ export async function loader() {
   }
 }
 
+// 处理登出请求
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const intent = formData.get("intent");
+  
+  if (intent === "logout") {
+    return logout(request);
+  }
+  
+  return null;
+}
+
 export default function Home() {
-  const { homeData: initialHomeData, recentFiles: initialRecentFiles } = useLoaderData<typeof loader>();
+  const navigate = useNavigate();
+  const { homeData: initialHomeData, recentFiles: initialRecentFiles, userRole: serverUserRole } = useLoaderData<typeof loader>();
   const [recentFiles, setRecentFiles] = useState<DocumentUI[]>(initialRecentFiles || []);
   const [homeData, setHomeData] = useState(initialHomeData);
   const [currentDateTime, setCurrentDateTime] = useState({
@@ -85,6 +98,12 @@ export default function Home() {
     time: ''
   });
   const [isLoading, setIsLoading] = useState(true);
+  const userRole = serverUserRole as UserRole;
+  
+  // 打印服务器端传递的用户角色
+  useEffect(() => {
+    console.log('服务器返回的用户角色:', serverUserRole);
+  }, [serverUserRole]);
   
   // 更新当前时间
   useEffect(() => {
@@ -107,6 +126,27 @@ export default function Home() {
     return () => clearInterval(timerID);
   }, []);
 
+  // 处理登出操作
+  const handleLogout = () => {
+    // 清除sessionStorage中的所有数据
+    if (typeof window !== 'undefined') {
+      sessionStorage.removeItem('userRole');
+      sessionStorage.removeItem('reviewType');
+      sessionStorage.removeItem('previousReviewType');
+      // 可以根据需要清除其他会话数据
+      sessionStorage.clear();
+    }
+    
+    // 使用Form组件提交登出请求
+    const form = document.getElementById('logout-form') as HTMLFormElement;
+    if (form) {
+      form.submit();
+    } else {
+      // 如果找不到表单，直接导航到登录页
+      navigate('/login');
+    }
+  };
+
   // 在客户端挂载时，根据 sessionStorage 中的 reviewType 加载正确的数据
   useEffect(() => {
     const loadData = async () => {
@@ -246,6 +286,11 @@ export default function Home() {
 
   return (
     <div className="dashboard-container">
+      {/* 登出表单 - 隐藏 */}
+      <Form method="post" id="logout-form" className="hidden">
+        <input type="hidden" name="intent" value="logout" />
+      </Form>
+      
       {/* 页面头部 */}
       <div className="flex justify-between items-center mb-4">
           <h2 className="text-xl font-medium">系统概览</h2>
@@ -257,13 +302,23 @@ export default function Home() {
             </div>
             <div className="user-profile p-4 border-b border-gray-100 flex items-center">
               <div className="avatar w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
-                <span>管</span>
+                <span>{userRole === 'developer' ? '管' : '用'}</span>
               </div>
               <div className="ml-3">
-                <p className="text-sm font-medium">系统管理员</p>
-                <p className="text-xs text-gray-500">超级管理员</p>
+                <p className="text-sm font-medium">{userRole === 'developer' ? '系统管理员' : '普通用户'}</p>
+                <p className="text-xs text-gray-500">{userRole === 'developer' ? '超级管理员' : '标准权限'}</p>
               </div>
             </div>
+            {/* 登出操作 */}
+            <Button 
+              type="default" 
+              size="small" 
+              className="ml-4 hover:bg-gray-100"
+              onClick={handleLogout}
+            >
+              <i className="ri-logout-box-line mr-1"></i>
+              登出
+            </Button>
           </div>
       </div>