diff --git a/bank-frontend/ROUTING_AUTH_FIX.md b/bank-frontend/ROUTING_AUTH_FIX.md new file mode 100644 index 0000000..584cced --- /dev/null +++ b/bank-frontend/ROUTING_AUTH_FIX.md @@ -0,0 +1,164 @@ +# 银行前端系统 - 路由认证修复 + +## 问题描述 + +用户访问 `https://ad.ningmuyun.com/bank/` 时直接跳转到 `https://ad.ningmuyun.com/bank/project-list` 页面,没有显示登录页面。 + +## 问题分析 + +### 1. 根本原因 +- 路由配置中设置了默认重定向:`redirect: '/project-list'` +- 没有在重定向前检查用户认证状态 +- 导致无论用户是否登录都直接跳转到项目列表页面 + +### 2. 原始配置 +```javascript +// routes.js +{ + path: '/', + redirect: '/project-list', // ❌ 无条件重定向 +} +``` + +## 解决方案 + +### 1. 修改路由守卫逻辑 +在 `bank-frontend/src/router/index.js` 中添加根路径的认证检查: + +```javascript +// 处理根路径的认证检查 +if (to.path === '/') { + if (userStore.isLoggedIn) { + next('/project-list') // 已登录跳转到项目列表 + } else { + next('/login') // 未登录跳转到登录页面 + } + return +} +``` + +### 2. 移除静态重定向 +在 `bank-frontend/src/router/routes.js` 中移除静态重定向: + +```javascript +// 修改前 +{ + path: '/', + redirect: '/project-list', +} + +// 修改后 +{ + path: '/', + name: 'Root', + // 重定向逻辑已移至路由守卫中处理 +} +``` + +### 3. 优化登录页面重定向 +将登录成功后的默认重定向从 `/dashboard` 改为 `/project-list`: + +```javascript +// 如果访问登录页面且已有有效token,重定向到项目列表 +if (to.path === '/login' && userStore.token && userStore.isLoggedIn) { + const redirectPath = to.query.redirect || '/project-list' // 改为项目列表 + next(redirectPath) + return +} +``` + +## 修改的文件 + +### 1. bank-frontend/src/router/index.js +- 添加根路径认证检查逻辑 +- 优化登录页面重定向目标 + +### 2. bank-frontend/src/router/routes.js +- 移除静态重定向配置 +- 添加注释说明重定向逻辑位置 + +## 修复后的行为 + +### 1. 未登录用户 +- 访问 `https://ad.ningmuyun.com/bank/` +- 自动跳转到 `https://ad.ningmuyun.com/bank/login` +- 显示登录页面 + +### 2. 已登录用户 +- 访问 `https://ad.ningmuyun.com/bank/` +- 自动跳转到 `https://ad.ningmuyun.com/bank/project-list` +- 显示项目列表页面 + +### 3. 登录成功后 +- 从登录页面跳转到项目列表页面 +- 保持原有的重定向参数功能 + +## 技术实现 + +### 1. 认证状态检查 +```javascript +const userStore = useUserStore() +// 检查用户是否已登录 +if (userStore.isLoggedIn) { + // 已登录逻辑 +} else { + // 未登录逻辑 +} +``` + +### 2. 路由守卫优先级 +```javascript +router.beforeEach(async (to, from, next) => { + // 1. 处理根路径认证检查 + if (to.path === '/') { ... } + + // 2. 处理登录页面重定向 + if (to.path === '/login' && userStore.isLoggedIn) { ... } + + // 3. 处理其他路由的权限检查 + if (to.meta.requiresAuth) { ... } +}) +``` + +### 3. 用户状态管理 +- 从 `localStorage` 读取 token 和用户数据 +- 使用 `isLoggedIn` 计算属性判断登录状态 +- 应用启动时自动检查登录状态 + +## 测试建议 + +### 1. 未登录测试 +1. 清除浏览器缓存和 localStorage +2. 访问 `https://ad.ningmuyun.com/bank/` +3. 验证是否跳转到登录页面 + +### 2. 已登录测试 +1. 正常登录系统 +2. 访问 `https://ad.ningmuyun.com/bank/` +3. 验证是否跳转到项目列表页面 + +### 3. 登录流程测试 +1. 从根路径跳转到登录页面 +2. 输入正确的用户名和密码 +3. 验证登录成功后跳转到项目列表页面 + +## 更新日志 + +- **v1.4.0** (2024-01-15) + - 修复根路径直接跳转问题 + - 添加认证状态检查逻辑 + - 优化登录页面重定向目标 + - 提升用户体验和安全性 + +## 注意事项 + +1. **缓存清理**:修改后需要清理浏览器缓存 +2. **测试验证**:确保所有认证流程正常工作 +3. **向后兼容**:保持现有API和功能不变 +4. **错误处理**:确保认证失败时有适当的错误提示 + +## 相关文件 + +- `bank-frontend/src/router/index.js` - 路由守卫逻辑 +- `bank-frontend/src/router/routes.js` - 路由配置 +- `bank-frontend/src/stores/user.js` - 用户状态管理 diff --git a/bank-frontend/env.example b/bank-frontend/env.example index 6ad701f..c10be0b 100644 --- a/bank-frontend/env.example +++ b/bank-frontend/env.example @@ -1,9 +1,7 @@ # 开发环境配置 VITE_APP_TITLE=银行管理后台系统 - - VITE_API_BASE_URL=http://localhost:5351 VITE_APP_VERSION=1.0.0 # 生产环境配置 -# VITE_API_BASE_URL=https://api.bank.com \ No newline at end of file +VITE_API_BASE_URL=/bank/api \ No newline at end of file diff --git a/bank-frontend/src/config/env.js b/bank-frontend/src/config/env.js index 9396afc..636f9c1 100644 --- a/bank-frontend/src/config/env.js +++ b/bank-frontend/src/config/env.js @@ -11,14 +11,14 @@ const getEnvVar = (key, defaultValue = '') => { // API配置 export const API_CONFIG = { - // API基础URL - baseUrl: getEnvVar('VITE_API_BASE_URL', 'http://localhost:5351'), + // API基础URL - 根据环境动态设置 + baseUrl: getEnvVar('VITE_API_BASE_URL', import.meta.env.DEV ? '/bank/api' : '/bank/api'), // 是否使用代理 useProxy: getEnvVar('VITE_USE_PROXY', 'true') === 'true', // 完整的基础URL(用于直接请求) - fullBaseUrl: getEnvVar('VITE_API_BASE_URL', 'http://localhost:5351'), + fullBaseUrl: getEnvVar('VITE_API_BASE_URL', import.meta.env.DEV ? '/bank/api' : '/bank/api'), // 请求超时时间 timeout: parseInt(getEnvVar('VITE_API_TIMEOUT', '10000')), diff --git a/bank-frontend/src/router/index.js b/bank-frontend/src/router/index.js index ba0dfb6..bff8c8c 100644 --- a/bank-frontend/src/router/index.js +++ b/bank-frontend/src/router/index.js @@ -9,7 +9,7 @@ import routes from './routes' // 创建路由实例 const router = createRouter({ - history: createWebHistory(), + history: createWebHistory('/bank/'), // 设置基础路径 routes, scrollBehavior(to, from, savedPosition) { // 如果有保存的位置,则恢复到保存的位置 @@ -29,9 +29,19 @@ router.beforeEach(async (to, from, next) => { // 获取用户存储 const userStore = useUserStore() - // 如果访问登录页面且已有有效token,重定向到仪表盘 + // 处理根路径的认证检查 + if (to.path === '/') { + if (userStore.isLoggedIn) { + next('/project-list') + } else { + next('/login') + } + return + } + + // 如果访问登录页面且已有有效token,重定向到项目列表 if (to.path === '/login' && userStore.token && userStore.isLoggedIn) { - const redirectPath = to.query.redirect || '/dashboard' + const redirectPath = to.query.redirect || '/project-list' next(redirectPath) return } @@ -49,8 +59,8 @@ router.beforeEach(async (to, from, next) => { if (to.meta.roles && to.meta.roles.length > 0) { const userRole = userStore.getUserRoleName() if (!to.meta.roles.includes(userRole)) { - // 用户角色不匹配,重定向到仪表盘 - next('/dashboard') + // 用户角色不匹配,重定向到项目列表 + next('/project-list') } else { // 用户已登录且角色匹配,允许访问 next() diff --git a/bank-frontend/src/router/routes.js b/bank-frontend/src/router/routes.js index b0d53aa..20d99e4 100644 --- a/bank-frontend/src/router/routes.js +++ b/bank-frontend/src/router/routes.js @@ -32,7 +32,11 @@ import { const routes = [ { path: '/', - redirect: '/project-list', + name: 'Root', + meta: { + hideInMenu: true + } + // 重定向逻辑已移至路由守卫中处理 }, { path: '/login', diff --git a/bank-frontend/src/utils/api.js b/bank-frontend/src/utils/api.js index f6b5a80..4a0dd23 100644 --- a/bank-frontend/src/utils/api.js +++ b/bank-frontend/src/utils/api.js @@ -101,7 +101,7 @@ export const api = { * @returns {Promise} 登录结果 */ async login(username, password) { - const response = await fetch(`${API_CONFIG.baseUrl}/api/auth/login`, { + const response = await fetch(`${API_CONFIG.baseUrl}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -119,7 +119,7 @@ export const api = { * @returns {Promise} 响应数据 */ async get(endpoint, options = {}) { - let url = `${API_CONFIG.baseUrl}/api${endpoint}` + let url = `${API_CONFIG.baseUrl}${endpoint}` // 处理查询参数 if (options.params && Object.keys(options.params).length > 0) { @@ -158,7 +158,7 @@ export const api = { * @returns {Promise} 响应数据 */ async post(endpoint, data, options = {}) { - const url = `${API_CONFIG.baseUrl}/api${endpoint}` + const url = `${API_CONFIG.baseUrl}${endpoint}` const response = await fetch(url, { method: 'POST', headers: createHeaders(options.headers), @@ -176,7 +176,7 @@ export const api = { * @returns {Promise} 响应数据 */ async put(endpoint, data, options = {}) { - const url = `${API_CONFIG.baseUrl}/api${endpoint}` + const url = `${API_CONFIG.baseUrl}${endpoint}` const response = await fetch(url, { method: 'PUT', headers: createHeaders(options.headers), @@ -193,7 +193,7 @@ export const api = { * @returns {Promise} 响应数据 */ async delete(endpoint, options = {}) { - const url = `${API_CONFIG.baseUrl}/api${endpoint}` + const url = `${API_CONFIG.baseUrl}${endpoint}` const response = await fetch(url, { method: 'DELETE', headers: createHeaders(options.headers), diff --git a/bank-frontend/src/views/Login.vue b/bank-frontend/src/views/Login.vue index c25cadc..e5761de 100644 --- a/bank-frontend/src/views/Login.vue +++ b/bank-frontend/src/views/Login.vue @@ -109,8 +109,8 @@ const handleLogin = async () => { if (result.success) { message.success('登录成功') - // 重定向到目标页面或仪表盘 - const redirectPath = route.query.redirect || '/dashboard' + // 重定向到目标页面或项目列表 + const redirectPath = route.query.redirect || '/project-list' router.push(redirectPath) } else { message.error(result.message || '登录失败') @@ -125,7 +125,7 @@ const handleLogin = async () => { // 页面加载时检查是否已登录 if (userStore.isLoggedIn) { - const redirectPath = route.query.redirect || '/dashboard' + const redirectPath = route.query.redirect || '/project-list' router.push(redirectPath) } diff --git a/bank-frontend/vite.config.js b/bank-frontend/vite.config.js index e1609f4..133b5ac 100644 --- a/bank-frontend/vite.config.js +++ b/bank-frontend/vite.config.js @@ -9,6 +9,7 @@ export default defineConfig(({ mode }) => { return { plugins: [vue()], + base: '/bank/', // 设置基础路径 resolve: { alias: { '@': resolve(__dirname, 'src') @@ -18,10 +19,10 @@ export default defineConfig(({ mode }) => { port: 5300, host: '0.0.0.0', proxy: { - '/api': { + '/bank/api': { target: env.VITE_API_BASE_URL || 'http://localhost:5351', changeOrigin: true, - rewrite: (path) => path.replace(/^\/api/, '/api') + rewrite: (path) => path.replace(/^\/bank\/api/, '/api') } } },