智慧法务系统 - 权限认证系统

认证系统概述

本系统实现了一个简单的基于角色的权限认证系统，支持以下功能：

1. 用户可以以不同角色登录系统：

   • common：普通用户，只能访问基本功能
   • developer：开发者，可以访问所有功能，包括系统设置

2. 权限控制：

   • 根据用户角色显示或隐藏菜单项
   • 防止通过URL直接访问未授权页面

技术实现

权限系统基于以下核心技术实现：

1. Cookie会话存储：使用Remix的createCookieSessionStorage创建基于Cookie的会话存储
2. 角色权限控制：将用户角色存储在会话中，并在全局loader中检查访问权限
3. 界面适配：根据用户角色动态过滤显示菜单项

使用方法

登录系统

1. 访问登录页面(/login)
2. 输入用户名和密码
3. 选择用户角色：
   • 普通用户：只能看到基础功能菜单
   • 开发者：可以看到所有菜单，包括系统设置

权限验证

系统会自动执行以下权限验证：

1. 未登录用户会被重定向到登录页面
2. 普通用户试图访问系统设置等受限页面会被重定向到首页
3. 侧边栏菜单会根据用户角色动态显示

关键文件

• app/root.tsx：实现会话管理和全局权限检查
• app/components/layout/Sidebar.tsx：根据用户角色显示不同菜单
• app/routes/login.tsx：提供角色选择功能

进一步优化建议

1. 实现真实的用户认证系统，如接入数据库验证用户
2. 添加更细粒度的权限控制
3. 实现用户角色和权限的管理界面
4. 使用环境变量管理会话密钥等敏感信息

Welcome to Remix!

• 📖 Remix docs

Development

Run the dev server:

npm run dev

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of npm run build

• build/server
• build/client

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever css framework you prefer. See the Vite docs on css for more information.