修复路由重定向到/login + 登录失败提示不显示

- router: createWebHistory base设为import.meta.env.BASE_URL(build=/admin/, dev=/)
- vite.config: base按command区分(build时/admin/,dev时/)
- request.ts: HTTP错误(4xx/5xx)时解析后端返回的message显示给用户
- request.ts: token过期跳转登录页使用routerBase而非硬编码路径
main
haoliang 1 week ago
parent b28a89f263
commit 0cd61a51b3

@ -1,5 +1,9 @@
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router' import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// 部署在/admin/子路径下时base必须是/admin/
// 本地开发(npm run dev)时base是/
const routerBase = import.meta.env.BASE_URL
// 管理后台Layout // 管理后台Layout
const AdminLayout = () => import('@/layouts/AdminLayout.vue') const AdminLayout = () => import('@/layouts/AdminLayout.vue')
// 大屏Layout // 大屏Layout
@ -92,7 +96,7 @@ function generateMockRoutes(routes: RouteRecordRaw[]): RouteRecordRaw[] {
} }
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(routerBase),
routes: [...normalRoutes, ...generateMockRoutes(normalRoutes)], routes: [...normalRoutes, ...generateMockRoutes(normalRoutes)],
}) })

@ -3,6 +3,9 @@ import { ElMessage } from 'element-plus'
import router from '@/router' import router from '@/router'
import type { ApiResponse } from '@/types' import type { ApiResponse } from '@/types'
// 部署base路径用于token过期时跳转登录页
const routerBase = import.meta.env.BASE_URL
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
timeout: 30000, timeout: 30000,
@ -36,8 +39,8 @@ service.interceptors.response.use(
// Token无效/过期 // Token无效/过期
if (res.code === 40101) { if (res.code === 40101) {
localStorage.removeItem('token') localStorage.removeItem('token')
const isMock = window.location.pathname.startsWith('/mock') const loginPath = routerBase + 'login'
router.push(isMock ? '/mock/login' : '/login') router.push(loginPath)
ElMessage.warning('登录已过期') ElMessage.warning('登录已过期')
return Promise.reject(new Error(res.message)) return Promise.reject(new Error(res.message))
} }
@ -48,10 +51,15 @@ service.interceptors.response.use(
return Promise.reject(new Error(msg)) return Promise.reject(new Error(msg))
}, },
(error) => { (error) => {
// HTTP 错误4xx/5xx尝试解析后端返回的错误信息
if (error.response) { if (error.response) {
ElMessage.error('网络异常') const data = error.response.data as ApiResponse | undefined
const msg = data?.message || `请求失败 (${error.response.status})`
ElMessage.error(msg)
} else if (error.code === 'ECONNABORTED') { } else if (error.code === 'ECONNABORTED') {
ElMessage.error('请求超时') ElMessage.error('请求超时')
} else {
ElMessage.error('网络异常,请检查网络连接')
} }
return Promise.reject(error) return Promise.reject(error)
} }

@ -4,9 +4,9 @@ import { viteMockPlugin } from './mock/plugin'
import path from 'path' import path from 'path'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig(({ command }) => ({
// 部署到 /admin/ 子路径,静态资源路径前缀 // build时部署到/admin/子路径dev时用根路径
base: '/admin/', base: command === 'build' ? '/admin/' : '/',
plugins: [ plugins: [
vue(), vue(),
viteMockPlugin({ viteMockPlugin({
@ -35,4 +35,4 @@ export default defineConfig({
} }
} }
}, },
}) }))

Loading…
Cancel
Save