From 38b9f430ce6bd9c596f53be242779b51c84a2f3d Mon Sep 17 00:00:00 2001 From: lyt-Top <1105290566@qq.com> Date: Mon, 22 Feb 2021 21:56:45 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.02.22:=E5=A2=9E=E5=8A=A0axios?= =?UTF-8?q?=E3=80=81=E5=90=8E=E7=AB=AF=E6=8E=A7=E5=88=B6=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E7=AD=89'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 2 +- .env.development | 2 -- .env.production | 2 -- build/utils.ts | 8 ++++-- package.json | 8 ++++-- src/api/login/index.ts | 19 +++++++++++++ src/api/menu/index.ts | 40 +++++++++++++++++++++++++++ src/router/index.ts | 15 +++++++++- src/store/index.ts | 9 +++++- src/utils/request.ts | 60 ++++++++++++++++++++++++++++++++++++++++ src/utils/themeConfig.ts | 3 +- vite.config.ts | 12 ++++++-- 12 files changed, 164 insertions(+), 16 deletions(-) delete mode 100644 .env.development delete mode 100644 .env.production create mode 100644 src/api/login/index.ts create mode 100644 src/api/menu/index.ts create mode 100644 src/utils/request.ts diff --git a/.env b/.env index dcc98b3..b56a0c1 100644 --- a/.env +++ b/.env @@ -5,4 +5,4 @@ VITE_PORT = 10000 VITE_OPEN = false # public path 配置线上环境路径 -VITE_PUBLIC_PATH = /vue-admin-wonderful-next-preview/ +VITE_PUBLIC_PATH = /vue-admin-wonderful-next-preview/ \ No newline at end of file diff --git a/.env.development b/.env.development deleted file mode 100644 index 6c79e06..0000000 --- a/.env.development +++ /dev/null @@ -1,2 +0,0 @@ -# public path -VITE_PUBLIC_PATH = 'http://localhost:8080/' \ No newline at end of file diff --git a/.env.production b/.env.production deleted file mode 100644 index 2159594..0000000 --- a/.env.production +++ /dev/null @@ -1,2 +0,0 @@ -# public path -VITE_PUBLIC_PATH = /vue-admin-wonderful-next-preview/ diff --git a/build/utils.ts b/build/utils.ts index be3bdd4..27df7a3 100644 --- a/build/utils.ts +++ b/build/utils.ts @@ -1,9 +1,10 @@ // vite 打包相关 import dotenv from 'dotenv' export interface ViteEnv { - VITE_PORT: number - VITE_OPEN: boolean - VITE_PUBLIC_PATH: string + VITE_PORT: number, + VITE_OPEN: boolean, + VITE_PUBLIC_PATH: string, + VITE_LOCAL_PATH: string } export function loadEnv(): ViteEnv { @@ -12,6 +13,7 @@ export function loadEnv(): ViteEnv { const envList = [`.env.${env}.local`, `.env.${env}`, '.env.local', '.env', ,] envList.forEach((e) => { dotenv.config({ path: e }) }) for (const envName of Object.keys(process.env)) { + console.log(envName) let realName = (process.env as any)[envName].replace(/\\n/g, '\n') realName = realName === 'true' ? true : realName === 'false' ? false : realName if (envName === 'VITE_PORT') realName = Number(realName) diff --git a/package.json b/package.json index 45c6dd0..de9e5b5 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "build": "vite build" }, "dependencies": { + "axios": "^0.21.1", "clipboard": "^2.0.6", "echarts": "^5.0.2", "echarts-wordcloud": "^2.0.0", @@ -19,16 +20,17 @@ "vuex": "^4.0.0-rc.2" }, "devDependencies": { + "@types/axios": "^0.14.0", "@types/clipboard": "^2.0.1", - "@types/node": "^14.14.27", + "@types/node": "^14.14.31", "@types/nprogress": "^0.2.0", "@types/sortablejs": "^1.10.6", "@vitejs/plugin-vue": "^1.1.4", "@vue/compiler-sfc": "^3.0.5", "dotenv": "^8.2.0", - "sass": "^1.32.7", + "sass": "^1.32.8", "sass-loader": "^11.0.1", "typescript": "^4.1.5", - "vite": "^2.0.0-beta.69" + "vite": "^2.0.1" } } diff --git a/src/api/login/index.ts b/src/api/login/index.ts new file mode 100644 index 0000000..175fca5 --- /dev/null +++ b/src/api/login/index.ts @@ -0,0 +1,19 @@ +import request from '/@/utils/request.ts' + +// 用户登录 +export function signIn(params: object) { + return request({ + url: '/user/signIn', + method: 'post', + data: params + }) +} + +// 用户退出登录 +export function signOut(params: object) { + return request({ + url: '/user/signOut', + method: 'post', + data: params + }) +} \ No newline at end of file diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts new file mode 100644 index 0000000..1897639 --- /dev/null +++ b/src/api/menu/index.ts @@ -0,0 +1,40 @@ +import request from '/@/utils/request.ts' + +/** + * webpack 的代理只是本地开发生效，打包后需要在部署环境 搭建 nginx 代理 + * 所以： + * 开发环境，请求跨越的接口。为了配置跨越示例 + * 线上环境，请求目录下的 `json` 数据 + * 一般后端接口都会处理跨越问题，可根据具体情况进行修改 + */ +// 获取后端动态路由菜单(超级管理) +export function getMenuAdmin(params?: object) { + if (process.env.NODE_ENV === 'development') { + return request({ + url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/menu/menuAdmin.json', + method: 'get', + params, + }); + } else { + return request({ + url: './menuAdmin.json', + method: 'get' + }) + } +} + +// 获取后端动态路由菜单(普通用户) +export function getMenuOrdinary(params?: object) { + if (process.env.NODE_ENV === 'development') { + return request({ + url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/menu/menuOrdinary.json', + method: 'get', + params, + }); + } else { + return request({ + url: './menuOrdinary.json', + method: 'get' + }) + } +} diff --git a/src/router/index.ts b/src/router/index.ts index 3fcc2fd..0a9616e 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -3,6 +3,7 @@ import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; import { store } from "/@/store/index.ts" import { getSession, clearSession } from "/@/utils/storage.ts" +import { getMenuAdmin } from '/@/api/menu/index.ts' // 定义动态路由 export const dynamicRoutes = [ @@ -467,6 +468,16 @@ const router = createRouter({ routes: staticRoutes }) +// 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 +// console.log(store) +// console.log(dynamicRoutes) +// store.dispatch('setBackEndControlRoutes', 'admin') +export function getBackEndControlRoutes() { + getMenuAdmin().then((res: any) => { + console.log(res); + }); +} + // 多级嵌套数组处理成一维数组 export function formatFlatteningRoutes(arr: any) { if (arr.length < 0) return false @@ -577,7 +588,9 @@ export function initAllFun() { } // 初始化方法执行 -initAllFun() +if (!store.state.themeConfig.isRequestRoutes) initAllFun() +// 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 +if (store.state.themeConfig.isRequestRoutes) getBackEndControlRoutes() // 路由加载前 router.beforeEach((to, from, next) => { diff --git a/src/store/index.ts b/src/store/index.ts index bc8c811..fd85952 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -42,7 +42,8 @@ export interface RootStateTypes { tagsStyle: string, animation: string, columnsAsideStyle: string, - layout: string + layout: string, + isRequestRoutes: boolean }, routes: Array, keepAliveNames: Array, @@ -107,6 +108,12 @@ export const store = createStore({ if (getSession('userInfo')) commit('getUserInfos', getSession('userInfo')) } }, + // 后端控制路由 + async setBackEndControlRoutes({ commit }, query: string) { + if (query === 'admin') { + + } else { } + } } }) diff --git a/src/utils/request.ts b/src/utils/request.ts new file mode 100644 index 0000000..400d5ef --- /dev/null +++ b/src/utils/request.ts @@ -0,0 +1,60 @@ +import axios from "axios"; +import { ElMessage, ElMessageBox } from "element-plus"; +import { clearSession, getSession } from "/@/utils/storage.ts"; +import router, { resetRoute } from "/@/router/index.ts"; + +// 配置新建一个 axios 实例 +const service = axios.create({ + baseURL: 'http://localhost:10000/', + timeout: 50000, + headers: { "Content-Type": "application/json" } +}); + +// 添加请求拦截器 +service.interceptors.request.use( + (config) => { + // 在发送请求之前做些什么 token + if (getSession("token")) { + config.headers.common["Authorization"] = `${getSession("token")}`; + } + return config; + }, + (error) => { + // 对请求错误做些什么 + return Promise.reject(error); + } +); + +// 添加响应拦截器 +service.interceptors.response.use( + (response) => { + // 对响应数据做点什么 + const res = response.data; + if (res.code && res.code !== 0) { + // `token` 过期或者账号已在别处登录 + if (res.code === 401 || res.code === 4001) { + clearSession(); // 清除浏览器全部临时缓存 + router.push("/login"); // 去登录页面 + resetRoute() // 删除/重置路由 + ElMessageBox.alert('你已被登出，请重新登录', '提示', {}).then(() => { }).catch(() => { }); + } + return Promise.reject(service.interceptors.response); + } else { + return response.data; + } + }, + (error) => { + // 对响应错误做点什么 + if (error.message.indexOf("timeout") != -1) { + ElMessage.error("网络超时"); + } else if (error.message == "Network Error") { + ElMessage.error("网络连接错误"); + } else { + if (error.response.data) ElMessage.error(error.response.data.message) + else ElMessage.error('接口路径找不到') + } + return Promise.reject(error); + } +); + +export default service; diff --git a/src/utils/themeConfig.ts b/src/utils/themeConfig.ts index 96a9fdb..8ece3e4 100644 --- a/src/utils/themeConfig.ts +++ b/src/utils/themeConfig.ts @@ -38,5 +38,6 @@ export default { tagsStyle: 'tagsStyleOne', animation: 'slideRight', columnsAsideStyle: 'columnsRound', - layout: 'defaults' + layout: 'defaults', + isRequestRoutes: true } \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 185cd44..ee18584 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,7 +2,7 @@ import vue from '@vitejs/plugin-vue' import type { UserConfig } from 'vite' import { loadEnv } from './build/utils' -const { VITE_PORT, VITE_PUBLIC_PATH, VITE_OPEN } = loadEnv() +const { VITE_PORT, VITE_OPEN, VITE_PUBLIC_PATH } = loadEnv() const viteConfig: UserConfig = { plugins: [vue()], @@ -21,7 +21,15 @@ const viteConfig: UserConfig = { }, server: { port: VITE_PORT, - open: VITE_OPEN + open: VITE_OPEN, + proxy: { + '/gitee': { + target: 'https://gitee.com', + ws: true, + changeOrigin: true, + rewrite: (path) => path.replace(/^\/gitee/, ''), + } + } }, build: { outDir: 'dist',