XinLingKeJi/jdt-admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(custom): 多API版本
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
YuanHuakk
2025-09-23 18:24:41 +08:00
parent 5e32c846c7
commit d5751d305c
13 changed files with 336 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.env.development
View File

@@ -8,7 +8,12 @@ VITE_USE_MOCK=false
VITE_USE_PROXY=true
# base api
VITE_BASE_API='https://test.wanzhuanyongcheng.cn/admin'
VITE_BASE_API='/api'
VITE_BASE_API_1='/api1'
# VITE_BASE_API='https://test.wanzhuanyongcheng.cn/admin'
# VITE_BASE_API_1='https://api.gxwzwh.com/admin'
VITE_WS1_URL='game.wanzhuanyongcheng.cn/dice/home'

1
.env.production
View File

@@ -6,6 +6,7 @@ VITE_USE_MOCK=false
# base api
VITE_BASE_API='//www.wanzhuanyongcheng.cn/admin'
VITE_BASE_API_1='//api.gxwzwh.com/admin'
# 是否启用压缩
VITE_USE_COMPRESS=true

35
build/constant.js
View File

@@ -2,32 +2,23 @@ export const OUTPUT_DIR = 'dist'
export const PROXY_CONFIG = {
/**
* @desc 替换匹配值
* @请求路径 http://localhost:3100/api/user
* @转发路径 http://localhost:8080/user
* @desc 主接口代理
* @请求路径 http://localhost:3100/api/login
* @转发路径 http://localhost:3000/api/login
*/
'/admin': {
'/api': {
target: 'https://test.wanzhuanyongcheng.cn',
changeOrigin: true,
// rewrite: (path) => path.replace(new RegExp('^/api'), ''),
rewrite: (path) => path.replace(/^\/api/, '/admin'),
},
/**
* @desc 不替换匹配值
* @请求路径 http://localhost:3100/api/v2/user
* @转发路径 http://localhost:8080/api/v2/user
* @desc 备用接口代理
* @请求路径 http://localhost:3100/api1/login
* @转发路径 http://localhost:3001/api/login
*/
// '/api/v2': {
// target: 'http://localhost:8080',
// changeOrigin: true,
// },
/**
* @desc 替换部分匹配值
* @请求路径 http://localhost:3100/api/v3/user
* @转发路径 http://localhost:8080/user
*/
// '/api/v3': {
// target: 'http://localhost:8080',
// changeOrigin: true,
// rewrite: (path) => path.replace(new RegExp('^/api'), ''),
// },
'/api1': {
target: 'https://api.gxwzwh.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api1/, '/admin'),
},
}

4
src/main.js
View File

@@ -9,10 +9,14 @@ import { setupRouter } from '@/router'
import { setupStore } from '@/store'
import App from './App.vue'
import { setupNaiveDiscreteApi } from './utils'
import { initApiEndpoint } from '@/utils/api-config'
async function setupApp() {
const app = createApp(App)
// 初始化接口配置
initApiEndpoint()
setupStore(app)
setupNaiveDiscreteApi()

16
src/router/guard/permission-guard.js
View File

@@ -1,4 +1,5 @@
import { getToken, isNullOrWhitespace } from '@/utils'
import { addDynamicRoutes } from '@/router'
const WHITE_LIST = ['/login', '/404']
export function createPermissionGuard(router) {
@@ -14,7 +15,20 @@ export function createPermissionGuard(router) {
/** 有token的情况 */
if (to.path === '/login') return { path: '/' }
// refreshAccessToken()
// 确保动态路由已加载
if (token && !router.hasRoute('Dashboard')) {
try {
await addDynamicRoutes()
// 如果当前路径不存在，重定向到工作台
if (to.path !== '/' && !router.hasRoute(to.name)) {
return { path: '/workbench' }
}
} catch (error) {
console.error('动态路由加载失败:', error)
return { path: '/login' }
}
}
return true
})
}

35
src/router/index.js
View File

@@ -30,11 +30,42 @@ export async function addDynamicRoutes() {
try {
const permissionStore = usePermissionStore()
const accessRoutes = permissionStore.generateRoutes()
// 确保路由按正确顺序添加
accessRoutes.forEach((route) => {
!router.hasRoute(route.name) && router.addRoute(route)
if (!router.hasRoute(route.name)) {
router.addRoute(route)
}
})
router.hasRoute(EMPTY_ROUTE.name) && router.removeRoute(EMPTY_ROUTE.name)
// 移除空路由，添加404路由
if (router.hasRoute(EMPTY_ROUTE.name)) {
router.removeRoute(EMPTY_ROUTE.name)
}
router.addRoute(NOT_FOUND_ROUTE)
// 确保根路径重定向到工作台
if (!router.hasRoute('Dashboard')) {
const workbenchRoute = {
name: 'Dashboard',
path: '/',
component: () => import('@/layout/index.vue'),
redirect: '/workbench',
children: [
{
name: 'Workbench',
path: 'workbench',
component: () => import('@/views/workbench/index.vue'),
meta: {
title: '工作台',
icon: 'mdi:index',
order: 0,
},
},
],
}
router.addRoute(workbenchRoute)
}
} catch (error) {
console.error(error)
throw error

5
src/store/modules/user/index.js
View File

@@ -18,10 +18,7 @@ export const useUserStore = defineStore('user', {
return this.userInfo?.name
},
avatar() {
return (
this.userInfo?.avatar ||
'https://pic3.58cdn.com.cn/nowater/webim/big/n_v21bc7874294754e63a22b80febac9cf51.jpg'
)
return this.userInfo?.avatar || 'https://v2.xxapi.cn/api/head?return=302'
},
role() {
return this.userInfo?.role || []

61
src/utils/api-config.js Normal file
View File

@@ -0,0 +1,61 @@
// 判断是否为开发环境
const isDev = import.meta.env.DEV
// API接口线路配置管理
export const API_ENDPOINTS = {
primary: {
name: '主要线路',
baseURL: import.meta.env.VITE_BASE_API,
timeout: 10000,
},
backup1: {
name: '备用线路',
baseURL: import.meta.env.VITE_BASE_API_1,
timeout: 10000,
},
}
// 调试信息
console.log('=== 多接口配置信息 ===')
console.log('当前环境:', isDev ? '开发环境' : '生产环境')
console.log('API配置:', API_ENDPOINTS)
console.log('环境变量 VITE_BASE_API:', import.meta.env.VITE_BASE_API)
console.log('环境变量 VITE_BASE_API_1:', import.meta.env.VITE_BASE_API_1)
console.log('是否使用代理:', import.meta.env.VITE_USE_PROXY)
// 当前使用的接口线路
let currentEndpoint = 'primary'
// 获取当前接口配置
export function getCurrentEndpoint() {
return {
key: currentEndpoint,
...API_ENDPOINTS[currentEndpoint],
}
}
// 设置当前接口
export function setCurrentEndpoint(endpoint) {
if (API_ENDPOINTS[endpoint]) {
currentEndpoint = endpoint
localStorage.setItem('api_endpoint', endpoint)
return true
}
return false
}
// 获取所有可用接口
export function getAvailableEndpoints() {
return Object.entries(API_ENDPOINTS).map(([key, config]) => ({
key,
...config,
}))
}
// 初始化时从本地存储恢复接口选择
export function initApiEndpoint() {
const savedEndpoint = localStorage.getItem('api_endpoint')
if (savedEndpoint && API_ENDPOINTS[savedEndpoint]) {
currentEndpoint = savedEndpoint
}
}

94
src/utils/http/index.js
View File

@@ -1,5 +1,6 @@
import axios from 'axios'
import { resReject, resResolve, reqReject, reqResolve } from './interceptors'
import { getCurrentEndpoint, getAvailableEndpoints } from '../api-config'
export function createAxios(options = {}) {
const defaultOptions = {
@@ -14,6 +15,93 @@ export function createAxios(options = {}) {
return service
}
export const request = createAxios({
baseURL: import.meta.env.VITE_BASE_API,
})
// 创建支持多接口的请求实例
export function createMultiEndpointRequest() {
let instances = null
// 延迟创建axios实例
function ensureInstances() {
if (!instances) {
instances = {}
const endpoints = getAvailableEndpoints()
console.log('创建axios实例，接口列表:', endpoints)
endpoints.forEach((endpoint) => {
console.log(`创建实例 ${endpoint.key}:`, endpoint.baseURL)
instances[endpoint.key] = createAxios({
baseURL: endpoint.baseURL,
timeout: endpoint.timeout,
})
})
}
return instances
}
return {
// 使用当前选中的接口发送请求
async request(config) {
const instances = ensureInstances()
const currentEndpoint = getCurrentEndpoint()
console.log('当前接口配置:', currentEndpoint)
console.log('可用实例:', Object.keys(instances))
const instance = instances[currentEndpoint.key]
if (!instance) {
throw new Error(`接口实例不存在: ${currentEndpoint.key}`)
}
console.log(`使用接口: ${currentEndpoint.name} (${currentEndpoint.baseURL})`)
console.log('请求配置:', config)
return await instance(config)
},
// 获取当前接口实例
getCurrentInstance() {
const instances = ensureInstances()
const currentEndpoint = getCurrentEndpoint()
return instances[currentEndpoint.key]
},
// 获取所有接口实例
getAllInstances() {
return ensureInstances()
},
}
}
// export const request = createAxios({
// baseURL: import.meta.env.VITE_BASE_API,
// })
// 支持多接口的请求实例
export const multiRequest = createMultiEndpointRequest()
// 创建自动适配多接口的request实例
const multiEndpointInstance = createMultiEndpointRequest()
// 创建支持axios方法的request实例
export const request = {
// 基础请求方法
request: (config) => multiEndpointInstance.request(config),
// 自动适配axios方法
get: (url, config = {}) => multiEndpointInstance.request({ method: 'get', url, ...config }),
post: (url, data, config = {}) =>
multiEndpointInstance.request({ method: 'post', url, data, ...config }),
put: (url, data, config = {}) =>
multiEndpointInstance.request({ method: 'put', url, data, ...config }),
delete: (url, config = {}) => multiEndpointInstance.request({ method: 'delete', url, ...config }),
patch: (url, data, config = {}) =>
multiEndpointInstance.request({ method: 'patch', url, data, ...config }),
head: (url, config = {}) => multiEndpointInstance.request({ method: 'head', url, ...config }),
options: (url, config = {}) =>
multiEndpointInstance.request({ method: 'options', url, ...config }),
// 获取当前接口实例（用于直接访问axios实例）
getCurrentInstance: () => multiEndpointInstance.getCurrentInstance(),
getAllInstances: () => multiEndpointInstance.getAllInstances(),
}

2
src/views/business/mer_list/index.vue
View File

@@ -369,7 +369,7 @@ const columns = ref([
window.open(
`${import.meta.env.VITE_MER_LOGIN_URL}?redirect=/workbench&type=${
res.data.type
}&tk=${res.data.token}`
}&tk=${res.data.token}&api=${localStorage.getItem('api_endpoint')}`
)
},
},

10
src/views/login/api.js
View File

@@ -1,5 +1,13 @@
import { request } from '@/utils'
import { request, multiRequest } from '@/utils'
export default {
login: (data) => request.post('/login', data, { noNeedToken: true }),
// 使用多接口的登录方法
loginWithMultiEndpoint: (data) =>
multiRequest.request({
method: 'post',
url: '/login',
data,
noNeedToken: true,
}),
}

96
src/views/login/index.vue
View File

@@ -14,7 +14,17 @@
<img src="@/assets/images/logo.png" height="50" class="mr-10" />
{{ title }}
</h5>
<div mt-30>
<!-- 接口线路选择 -->
<div mt-20>
<n-select
v-model:value="selectedEndpoint"
:options="endpointOptions"
placeholder="选择接口线路"
size="large"
@update:value="handleEndpointChange"
/>
</div>
<div mt-10>
<n-input
v-model:value="loginInfo.name"
autofocus
@@ -23,7 +33,7 @@
:maxlength="20"
/>
</div>
<div mt-30>
<div mt-10>
<n-input
v-model:value="loginInfo.password"
class="h-50 items-center pl-10 text-16"
@@ -67,6 +77,12 @@ import { useStorage } from '@vueuse/core'
import bgImg from '@/assets/images/login_bg.webp'
import api from './api'
import { addDynamicRoutes } from '@/router'
import {
getAvailableEndpoints,
setCurrentEndpoint,
getCurrentEndpoint,
initApiEndpoint,
} from '@/utils/api-config'
const title = import.meta.env.VITE_TITLE
@@ -90,6 +106,61 @@ function initLoginInfo() {
const isRemember = useStorage('isRemember', false)
const loading = ref(false)
// 接口线路相关
const selectedEndpoint = ref('primary')
const endpointOptions = ref([])
// 初始化接口配置
initApiEndpoint()
const currentEndpoint = getCurrentEndpoint()
selectedEndpoint.value = currentEndpoint.key
// 加载接口选项
function loadEndpointOptions() {
const endpoints = getAvailableEndpoints()
endpointOptions.value = endpoints.map((endpoint) => ({
label: endpoint.name,
value: endpoint.key,
}))
}
// 处理接口切换
function handleEndpointChange(value) {
if (setCurrentEndpoint(value)) {
selectedEndpoint.value = value
$message.success(`已切换到${endpointOptions.value.find((opt) => opt.value === value)?.label}`)
} else {
$message.error('接口切换失败')
}
}
// 初始化
onMounted(() => {
loadEndpointOptions()
})
// 获取第一个可用的路由页面
function getFirstAvailableRoute(menuData) {
if (!menuData || !Array.isArray(menuData)) return null
// 递归查找第一个type为2的路由（页面路由）
function findFirstPageRoute(routes) {
for (const route of routes) {
if (route.type === 2 && route.route) {
return route.route
}
if (route.subMenu && route.subMenu.length) {
const found = findFirstPageRoute(route.subMenu)
if (found) return found
}
}
return null
}
return findFirstPageRoute(menuData)
}
async function handleLogin() {
const { name, password } = loginInfo.value
if (!name || !password) {
@@ -99,7 +170,14 @@ async function handleLogin() {
try {
loading.value = true
$message.loading('正在验证...')
const res = await api.login({ phone: name, password: password.toString() })
console.log('开始登录请求...')
console.log('登录数据:', { phone: name, password: password.toString() })
console.log('当前选中接口:', selectedEndpoint.value)
const res = await api.loginWithMultiEndpoint({ phone: name, password: password.toString() })
console.log('登录响应:', res)
$message.success('登录成功')
window.localStorage.setItem('menu', JSON.stringify(res.data.auth))
setToken(res.data.token)
@@ -108,17 +186,23 @@ async function handleLogin() {
} else {
lStorage.remove('loginInfo')
}
// 先添加动态路由
await addDynamicRoutes()
// console.log(query)
// 获取第一个可用的路由页面
const firstRoute = getFirstAvailableRoute(res.data.auth)
if (query.redirect) {
const path = query.redirect
Reflect.deleteProperty(query, 'redirect')
router.push({ path, query })
} else {
router.push('/workbench')
// 跳转到第一个可用路由，如果没有则跳转到工作台
router.push(firstRoute || '/workbench')
}
// router.push('/workbench')
} catch (error) {
console.error('登录请求失败:', error)
$message.removeMessage()
}
loading.value = false

17
vite.config.js
View File

@@ -13,6 +13,13 @@ export default defineConfig(({ command, mode }) => {
const viteEnv = convertEnv(env)
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_USE_PROXY, VITE_BASE_API, VITE_SENTRY } = viteEnv
// 调试代理配置
console.log('=== Vite代理配置调试 ===')
console.log('VITE_USE_PROXY:', VITE_USE_PROXY)
console.log('VITE_BASE_API:', VITE_BASE_API)
console.log('PROXY_CONFIG:', PROXY_CONFIG)
console.log('所有环境变量:', viteEnv)
return {
base: VITE_PUBLIC_PATH || '/',
resolve: {
@@ -26,12 +33,10 @@ export default defineConfig(({ command, mode }) => {
host: '0.0.0.0',
port: VITE_PORT,
open: false,
proxy: VITE_USE_PROXY
? {
[VITE_BASE_API]: PROXY_CONFIG[VITE_BASE_API],
'/api/v2': PROXY_CONFIG['/api/v2'],
}
: undefined,
proxy: {
'/api1': PROXY_CONFIG['/api1'],
'/api': PROXY_CONFIG['/api'],
},
},
build: {
target: 'es2015',