334 lines
7.0 KiB
Markdown
334 lines
7.0 KiB
Markdown
# 前端快速开始 - 5分钟集成RBAC系统
|
||
|
||
**版本**: v1.0
|
||
**日期**: 2025-11-17
|
||
**目标**: 最快速度集成登录、动态路由和数据访问
|
||
|
||
---
|
||
|
||
## ⚡ 5分钟集成步骤
|
||
|
||
### 步骤1: 安装依赖（1分钟）
|
||
|
||
```bash
|
||
npm install axios pinia vue-router@4 element-plus
|
||
```
|
||
|
||
### 步骤2: 配置环境变量（30秒）
|
||
|
||
创建 `.env.development`：
|
||
|
||
```env
|
||
VITE_API_BASE_URL=http://172.16.0.55:8073
|
||
```
|
||
|
||
### 步骤3: 创建请求工具（1分钟）
|
||
|
||
**文件**: `src/utils/request.ts`
|
||
|
||
```typescript
|
||
import axios from 'axios';
|
||
import { ElMessage } from 'element-plus';
|
||
|
||
const service = axios.create({
|
||
baseURL: import.meta.env.VITE_API_BASE_URL || 'http://172.16.0.55:8073',
|
||
timeout: 30000
|
||
});
|
||
|
||
// 请求拦截器：自动添加Token
|
||
service.interceptors.request.use(config => {
|
||
const token = localStorage.getItem('token');
|
||
if (token) {
|
||
config.headers['Authorization'] = `Bearer ${token}`;
|
||
}
|
||
return config;
|
||
});
|
||
|
||
// 响应拦截器：统一错误处理
|
||
service.interceptors.response.use(
|
||
response => response,
|
||
error => {
|
||
if (error.response?.status === 401) {
|
||
ElMessage.error('登录已过期');
|
||
localStorage.clear();
|
||
window.location.href = '/login';
|
||
}
|
||
return Promise.reject(error);
|
||
}
|
||
);
|
||
|
||
export default service;
|
||
```
|
||
|
||
### 步骤4: 创建用户Store（2分钟）
|
||
|
||
**文件**: `src/stores/user.ts`
|
||
|
||
```typescript
|
||
import { defineStore } from 'pinia';
|
||
import { ref } from 'vue';
|
||
import request from '@/utils/request';
|
||
import router from '@/router';
|
||
|
||
export const useUserStore = defineStore('user', () => {
|
||
const token = ref('');
|
||
const userInfo = ref<any>(null);
|
||
const routes = ref<any[]>([]);
|
||
|
||
// 登录
|
||
const login = async (username: string, password: string) => {
|
||
const res = await request.post('/auth/login', { username, password });
|
||
|
||
if (res.data.success) {
|
||
token.value = res.data.data.access_token;
|
||
userInfo.value = res.data.data.user_info;
|
||
|
||
localStorage.setItem('token', token.value);
|
||
localStorage.setItem('userInfo', JSON.stringify(userInfo.value));
|
||
|
||
return true;
|
||
}
|
||
return false;
|
||
};
|
||
|
||
// 获取路由
|
||
const fetchRoutes = async () => {
|
||
const res = await request.get('/user/routes');
|
||
|
||
if (res.data.code === 200) {
|
||
routes.value = res.data.data.routes;
|
||
|
||
// 动态注册路由
|
||
routes.value.forEach(route => {
|
||
router.addRoute({
|
||
path: route.route_path,
|
||
name: route.route_name,
|
||
component: () => import(`@/views/${route.component}.vue`),
|
||
meta: { title: route.route_title }
|
||
});
|
||
});
|
||
|
||
return routes.value;
|
||
}
|
||
};
|
||
|
||
// 登出
|
||
const logout = () => {
|
||
token.value = '';
|
||
userInfo.value = null;
|
||
routes.value = [];
|
||
localStorage.clear();
|
||
router.push('/login');
|
||
};
|
||
|
||
return { token, userInfo, routes, login, fetchRoutes, logout };
|
||
});
|
||
```
|
||
|
||
### 步骤5: 配置路由守卫（30秒）
|
||
|
||
**文件**: `src/router/index.ts`
|
||
|
||
```typescript
|
||
import { createRouter, createWebHistory } from 'vue-router';
|
||
import { useUserStore } from '@/stores/user';
|
||
|
||
const router = createRouter({
|
||
history: createWebHistory(),
|
||
routes: [
|
||
{ path: '/login', component: () => import('@/views/Login.vue') }
|
||
]
|
||
});
|
||
|
||
router.beforeEach(async (to, from, next) => {
|
||
const userStore = useUserStore();
|
||
const token = localStorage.getItem('token');
|
||
|
||
if (token && !userStore.token) {
|
||
userStore.token = token;
|
||
userStore.userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
|
||
}
|
||
|
||
if (to.path !== '/login' && !token) {
|
||
next('/login');
|
||
} else if (token && !userStore.routes.length) {
|
||
await userStore.fetchRoutes();
|
||
next({ ...to, replace: true });
|
||
} else {
|
||
next();
|
||
}
|
||
});
|
||
|
||
export default router;
|
||
```
|
||
|
||
### 步骤6: 创建登录页（30秒）
|
||
|
||
**文件**: `src/views/Login.vue`
|
||
|
||
```vue
|
||
<template>
|
||
<el-form @submit.prevent="handleLogin">
|
||
<el-form-item>
|
||
<el-input v-model="username" placeholder="用户名" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input v-model="password" type="password" placeholder="密码" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" native-type="submit" :loading="loading">
|
||
登录
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { useUserStore } from '@/stores/user';
|
||
import { ElMessage } from 'element-plus';
|
||
|
||
const router = useRouter();
|
||
const userStore = useUserStore();
|
||
|
||
const username = ref('');
|
||
const password = ref('');
|
||
const loading = ref(false);
|
||
|
||
const handleLogin = async () => {
|
||
loading.value = true;
|
||
|
||
try {
|
||
const success = await userStore.login(username.value, password.value);
|
||
|
||
if (success) {
|
||
await userStore.fetchRoutes();
|
||
router.push('/home');
|
||
} else {
|
||
ElMessage.error('登录失败');
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('登录失败');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ 完成！
|
||
|
||
现在你已经完成了基础集成，可以：
|
||
|
||
1. ✅ 用户登录
|
||
2. ✅ 动态加载路由
|
||
3. ✅ 访问受保护的页面
|
||
|
||
---
|
||
|
||
## 🚀 下一步：数据访问
|
||
|
||
### 查询数据
|
||
|
||
```typescript
|
||
import request from '@/utils/request';
|
||
|
||
// 查询文档列表
|
||
const fetchDocuments = async () => {
|
||
const res = await request.get('/documents', {
|
||
params: {
|
||
user_id: `eq.${userInfo.user_id}`, // 只查自己的数据
|
||
limit: 20,
|
||
offset: 0
|
||
}
|
||
});
|
||
return res.data;
|
||
};
|
||
```
|
||
|
||
### 创建数据
|
||
|
||
```typescript
|
||
const createDocument = async (data: any) => {
|
||
const res = await request.post('/documents', data);
|
||
return res.data;
|
||
};
|
||
```
|
||
|
||
### 更新数据
|
||
|
||
```typescript
|
||
const updateDocument = async (id: number, data: any) => {
|
||
const res = await request.patch(`/documents?id=eq.${id}`, data);
|
||
return res.data;
|
||
};
|
||
```
|
||
|
||
### 删除数据
|
||
|
||
```typescript
|
||
const deleteDocument = async (id: number) => {
|
||
const res = await request.delete(`/documents?id=eq.${id}`);
|
||
return res.data;
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 📚 测试账号
|
||
|
||
| 用户名 | 密码 | 角色 | 说明 |
|
||
|--------|------|------|------|
|
||
| 000 | admin06111 | 超级管理员 | 所有权限（29个路由） |
|
||
| 001 | gdyc06111 | 普通用户 | 有限权限（19个路由） |
|
||
| jy001 | jyyc0814 | 系统管理员 | 所有权限（29个路由） |
|
||
|
||
---
|
||
|
||
## 🔧 常见问题
|
||
|
||
### 1. Token过期怎么办？
|
||
|
||
后端返回401时，自动清除Token并跳转登录页。
|
||
|
||
### 2. 路由404怎么办？
|
||
|
||
检查组件路径是否正确：
|
||
|
||
```typescript
|
||
// 后端返回: component: "views/Home"
|
||
// 前端import: @/views/views/Home.vue ❌
|
||
|
||
// 修改为:
|
||
component: () => import(`@/views/Home.vue`)
|
||
```
|
||
|
||
### 3. 普通用户能看到所有数据？
|
||
|
||
前端必须手动添加 `user_id` 过滤：
|
||
|
||
```typescript
|
||
// ❌ 错误
|
||
const docs = await request.get('/documents');
|
||
|
||
// ✅ 正确
|
||
const docs = await request.get('/documents', {
|
||
params: { user_id: `eq.${userInfo.user_id}` }
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 📖 详细文档
|
||
|
||
完整API说明请查看：
|
||
- **完整对接文档**: `docs/RBAC/前端完整对接文档_RBAC与PostgREST.md`
|
||
|
||
---
|
||
|
||
**创建时间**: 2025-11-17
|
||
**维护者**: Claude Code
|