94 lines
2.5 KiB
Markdown
94 lines
2.5 KiB
Markdown
# 智慧法务系统 - 权限认证系统
|
|
|
|
## 认证系统概述
|
|
|
|
本系统实现了一个简单的基于角色的权限认证系统，支持以下功能：
|
|
|
|
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.
|