'admin-21.02.22:增加axios、后端控制路由等'

.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/

.env.development

@@ -1,2 +0,0 @@
-# public path
-VITE_PUBLIC_PATH = 'http://localhost:8080/'

.env.production

@@ -1,2 +0,0 @@
-# public path
-VITE_PUBLIC_PATH = /vue-admin-wonderful-next-preview/

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)

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"
   }
 }

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
+    })
+}

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'
+        })
+    }
+}

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) => {

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<object>,
     keepAliveNames: Array<string>,
@@ -107,6 +108,12 @@ export const store = createStore<RootStateTypes>({
                 if (getSession('userInfo')) commit('getUserInfos', getSession('userInfo'))
             }
         },
+        // 后端控制路由
+        async setBackEndControlRoutes({ commit }, query: string) {
+            if (query === 'admin') {
+
+            } else { }
+        }
     }
 })
 

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;

src/utils/themeConfig.ts

@@ -38,5 +38,6 @@ export default {
     tagsStyle: 'tagsStyleOne',
     animation: 'slideRight',
     columnsAsideStyle: 'columnsRound',
-    layout: 'defaults'
+    layout: 'defaults',
+    isRequestRoutes: true
 }

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',