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

## 认证系统概述

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

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](https://remix.run/docs)

## Development

Run the dev server:

```shellscript
npm run dev
```

## Deployment

First, build your app for production:

```sh
npm run build
```

Then run the app in production mode:

```sh
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](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.